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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

Единственные два решения, которые приходят на мой взгляд, являются:

1. установки отрицательный запас, равный ширине границы на .text
2. используя отрицательные значения на вершине и свойство left.

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

Answer 4

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

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