从边界外部绝对定位

当我在相对元素内绝对定位一个元素时，坐标是从容器的边缘计算出来的，没有考虑到边界（相当于从边界的内侧定位）从边界外部绝对定位

有没有任何方法来定位元素，但从边界的外侧？

例如：如果我有一个没有边框的红色正方形（如第一个），文本将粘贴到容器的左上角，因为它具有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>
但我想知道是否有可能在保持边界的同时进行。

来源

2016-10-21 Alvaro Montoro

请记住，边框可以去里面只有当盒大小：border-框;财产设置。 –

在这两种情况下都有'box-sizing：border-box' –

如果改变html有点不打扰你，你可以看看这个https://jsfiddle.net/87hurwnu/或者更好的是不改变html https://jsfiddle.net/87hurwnu/1/ – Lidaranis

没有箱子阴影，但不是相当边界。这个怎么样？

.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元素上

来源

2016-10-21 14:34:42 Lidaranis

这是一个非常简单明智的选择。我喜欢 –

我不知道你是否考虑过它，但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>

来源

2016-10-21 14:09:12 Dez

这与我提供的第二个例子有什么不同？除了'margin：0'外，它看起来（似乎工作）相同 –

好吧，避免在边距和/或定位中使用负值，您不依赖于其他html对象，这可能会通过DOM操作进行修改，所以从我的角度来看，这个解决方案将是最干净的。 – Dez

只有两个解决方案，来我的脑海中：

顶部使用负值设置等于边框宽度阴性切缘上.text
并留下财产。

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

来源

2016-10-21 14:12:27 LinkinTED

是否有一个通用的解决方案，不依赖于边框尺寸？ –

正如你可以在中心100×100区域是区域，其中文本内容将被放置看到。每个内容都将根据边距，边框和填充进行计算。

因此，我没有看到一个解决方案，而无需使用如你所说，这是某种修复原来的问题负利润或插图框。

来源

2016-10-21 14:13:15

从边界外部绝对定位

回答

相关问题