從邊界外部絕對定位

當我在相對元素內絕對定位一個元素時，座標是從容器的邊緣計算出來的，沒有考慮到邊界（相當於從邊界的內側定位）從邊界外部絕對定位

有沒有任何方法來定位元素，但從邊界的外側？

例如：如果我有一個沒有邊框的紅色正方形（如第一個），文本將粘貼到容器的左上角，因爲它具有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

從邊界外部絕對定位

回答

相關問題