当我在相对元素内部绝对定位一个元素时,坐标是从容器的边缘计算的,而不考虑边框(相当于从边框内侧定位)。是否有一种方法可以从边框外部定位元素?
例如:如果我有一个没有边框的红色正方形(如第一个),文本会紧贴容器的左上角,因为它具有"top: 0; left: 0"。但是第二个正方形中的文本仍然具有"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;
}
<div class="box">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text">Text</div>
</div>
Note: This is more of a theory question out of curiosity; I know there are alternatives that will work (at least visually) like using negative margins, negative positioning values or an inset
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>
but what I would like to know if it it's possible doing while keeping the borders.
box-sizing: border-box
。 - Alvaro Montoro