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边框与绝对定位

回答

相关问题