Intereting Posts
Смещение пробелов с столбцами Bootstrap Как HTML-адрес типа ввода электронной почты работает без доменного имени верхнего уровня Показать добавленные значения на одной странице перед отправкой в ​​форму с несколькими вводами Как мы можем перекрывать два изображения, используя стиль css? Сохраняет ли токен OAuth в плохой практике куки? Как отобразить тег в gmail Можете ли вы смешать% и px для выравнивания таблицы? Отобразить HTML в проекте ActionScript 3 jQuery получает необработанный текст (unescaped) для дальнейшего parsingа по шаблонам подчеркивания Объедините переменные $ _GET перед отправкой Отправить Div id в javascript через onclick Недопустимый атрибут целевого объекта CSS Продолжение слайдера с использованием css3 анимационных ключевых кадров Игнорировать / переопределять окружающие / унаследованные CSS Альтернатива когда тег привязки запускает действие jQuery только без перенаправления пользователя?

Абсолютное позиционирование от внешней границы

Когда я занимаю абсолютное положение элемента внутри относительного элемента, координаты вычисляются по краям контейнера без учета границ (что было бы эквивалентно позиционированию с внутренней стороны границы).

Есть ли способ позиционирования элемента, но с внешней стороны границы?

Например: если у меня есть красный квадрат (например, первый) без frameworks, текст прикрепляется к верхнему левому краю контейнера, потому что он имеет top:0; left:0 top:0; left:0 . Но текст во втором квадрате по-прежнему имеет top:0;left:0 , но граница толкает текст внутри квадрата:

 .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-bordered { border:25px solid rgba(0,0,0,0.1); } .text { position:absolute; top:0; left:0; color:white; } направо .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-bordered { border:25px solid rgba(0,0,0,0.1); } .text { position:absolute; top:0; left:0; color:white; } 
 
Text
Text

Я бы хотел, чтобы текст продолжал придерживаться левого верхнего угла цветной области. Это возможно? Как это можно сделать?

Примечание. Это скорее вопрос теории из любопытства; Я знаю, что есть альтернативы, которые будут работать (по крайней мере визуально), например, использовать отрицательные поля, отрицательные значения позиционирования или вставку:

 .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-shadow { box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1); } .text { position:absolute; top:0; left:0; color:white; } направо .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-shadow { box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1); } .text { position:absolute; top:0; left:0; color:white; } 
 
Text

но то, что я хотел бы знать, можно ли это делать, сохраняя границы.

Отсутствие тени windows, но не совсем границы. Как насчет этого?

 .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box:before { content:" "; border:25px solid rgba(0,0,0,0.1); height:100%; z-index:1; position:absolute; box-sizing:border-box; width:100%; } .text { position:absolute; top:0; left:0; color:white; z-index:2; } направо .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box:before { content:" "; border:25px solid rgba(0,0,0,0.1); height:100%; z-index:1; position:absolute; box-sizing:border-box; width:100%; } .text { position:absolute; top:0; left:0; color:white; z-index:2; } 
 
Text

Единственные два решения, которые приходят мне на ум:

  1. установка отрицательного поля, равного ширине границы на .text
  2. используя отрицательные значения в верхнем и левом свойствах.
 .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-bordered { border:25px solid rgba(0,0,0,0.1); } .text { position:absolute; top:0; left:0; color:white; margin: -25px; } .text2 { position:absolute; top: -25px; left:-25px; color:white; } направо .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-bordered { border:25px solid rgba(0,0,0,0.1); } .text { position:absolute; top:0; left:0; color:white; margin: -25px; } .text2 { position:absolute; top: -25px; left:-25px; color:white; } направо .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-bordered { border:25px solid rgba(0,0,0,0.1); } .text { position:absolute; top:0; left:0; color:white; margin: -25px; } .text2 { position:absolute; top: -25px; left:-25px; color:white; } 
 
Text
Text

Я не знаю, считали ли вы это, но у box-shadow есть маржа по умолчанию. Установите значение 0 и вы достигнете желаемого результата.

 .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-shadow { box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1); margin: 0; } .text { position:absolute; top:0; left:0; color:white; } направо .box { position:relative; width:150px; height:150px; background:red; box-sizing:border-box; margin:10px; float:left; } .box-shadow { box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1); margin: 0; } .text { position:absolute; top:0; left:0; color:white; } 
 
Text

Как вы можете видеть в центре, область 100 x 100 – это область, в которой будет размещено текстовое содержимое. Каждый контент будет рассчитываться на основе полей, границ и отступов.

Контуры элементов

Поэтому я не вижу решения без использования отрицательных полей или вставки, как вы упомянули, что является своего рода исправлением исходного вопроса.