CSS邊框與絕對定位

干擾[編輯：澄清盒大小：似乎邊界框不適用的，因爲我使用的絕對定位]CSS邊框與絕對定位

下面的代碼說明我的問題。我使用絕對定位，因爲我發現使用基於流的佈局更加棘手，但我願意接受建議。我想要的是圍繞任意元素的邊界，沒有影響節點定位的邊界。（邊框可裁剪或由內容被覆蓋，但是這並不重要。）

尤其是父母的邊界必須能夠重疊與其子的邊界，這是不默認行爲。 CSS box-sizing屬性可以設置爲border-box來實現我想要的效果，但只有（我相信）內聯元素。它對絕對定位的元素沒有影響（據我所知）。

所以，我的做法是使用負邊距來抵消邊界寬度的孩子的位置。這似乎確實抵消了邊界存在的影響，但不幸的是，這並不是以一種在比例因子上保持一致的方式。在大規模，事情看起來不錯。在Chrome瀏覽器的默認瀏覽器中，元素定位有點偏離（它們顯得太高）;如果我變小，那麼元素的位置就會朝另一個方向移動。

但是，如果我完全刪除邊框，佈局似乎可以縮放。

所以我的問題是：是否有一個可靠（可擴展）的方式來在HTML元素上有邊界而不影響元素的位置？

[在這個例子中，我對一些邊界使用了不同的顏色。我希望看到的只有黑色，但在某些縮放我可以看到紅色和綠色的邊框，顯示出元素的位置正受到邊界的存在。]

感謝不倒翁 .bordered { 位置：絕對; height：18px; border：2px solid; margin：-2px; }

<span class="bordered" style="width: 55px; left: 30px;"> 
    <span class="bordered" style="width: 8px; left: 0;"> 
    (
    </span> 
    <span class="bordered" style="border-color: green; width: 47px; left: 8px;"> 
    <span class="bordered" style="border-color: red; width: 39px; left: 0;"> 
     <span class="bordered" style="width: 8px; left: 0;"> 
     5 
     </span> 
     <span class="bordered" style="width: 31px; left: 8px;"> 
     <span class="bordered" style="width: 23px; left: 8px;"> 
      Nil 
     </span> 
     </span> 
    </span> 
    <span class="bordered" style="width: 8px; left: 39px;"> 
    ) 
    </span> 
    </span> 
</span>

來源

2013-02-05 Roly

你試過盒子大小嗎？ http://www.w3schools.com/cssref/css3_pr_box-sizing.asp –

是的，我有。我會更新這個問題來澄清。謝謝。 – Roly

試用CSS2 outline屬性：

.bordered { 
    outline:2px solid blue; 
}

大綱不影響元素位置。

您還可以使用CSS3 outline-offset如下所示：http://www.css3.info/preview/outline/

來源

2013-02-05 12:10:12 TheBronx

在大多數元素中'outline-offset'默認爲零，所以你只需要CSS2'outline'屬性，這不是新的。 – BoltClock

真棒，歡呼！ – Roly

生病了，謝謝 – neaumusic

我還發現，使用零寬度的邊框（使其不影響佈局），然後添加的box-shadow來模擬可見邊框，似乎運作良好。

來源

2013-02-05 13:00:58 Roly

如果需要邊界半徑，這是更靈活的解決方案。 – jfroom

CSS邊框與絕對定位

回答

相關問題