Блог

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

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

Например: если у меня есть красный квадрат (как и первый) без границы, текст остается в верхнем левом углу контейнера, потому что у него есть 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;
}  

 <div class="box">
  <div class="text">Text</div>
</div>

<div class="box box-bordered">
  <div class="text">Text</div>
</div>  

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

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

 .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;
}  

 <div class="box box-shadow">
  <div class="text">Text</div>
</div>  

Запустите фрагмент кодаСкрыть результаты

Развернуть фрагмент

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

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

 .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;
}  

 <div class="box">
  <div class="text">Text</div>
</div>  

или с рамкой: после, если вы хотите сохранить класс в элементе div

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

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;
}  

 <div class="box box-bordered">
  <div class="text">Text</div>
</div>

<div class="box box-bordered">
  <div class="text2">Text</div>
</div>  

Я не знаю, рассматривали ли вы это, но 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;
}  

 <div class="box box-shadow">
  <div class="text">Text</div>
</div>  

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

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

Это posibble.

 .parent {
 position: relative;
 border: solid 1em;
}

.child {
 --top: 0;
 --left: 0;
 position: absolute;
 box-sizing: content-box;
 width: 100%;
 height: 100%;
 border: solid 0 transparent;
 border-width: inherit;
 top: calc(50%   var(--top));
 left: calc(50%   var(--left));
 transform: translate(-50%, -50%);
 background-origin: border-box;
}
  

Если у вашего родительского элемента разная ширина границы вокруг него. Это не сработало бы правильно. Но в большинстве случаев это сделало бы свою работу.