当我将元素绝对定位在相对元素内时，坐标是从容器的边缘计算的，而不考虑边框（相当于从边框的内侧定位。）
除了从边框的外侧定位元素之外，还有什么方法可以定位元素吗？
例如：如果我有一个没有边框的红色方块（如第一个），则文本会粘在容器的左上角，因为它有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>
或 box-bordered:after 如果您想将类保留在 div 元素上
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
