CSS边框干扰绝对定位

sg2wtvxw 于 2023-04-08 发布在其他

关注(0)|答案(4)|浏览(115)

[edit：澄清了框尺寸：border-box似乎不适用，因为我使用的是绝对定位]
下面的代码说明了我的问题。我使用的是绝对定位，因为我发现在基于流的布局中这个问题更枣手，但我愿意接受建议。我想要的是任意元素周围的边框，* 没有 * 影响节点定位的边框。（边框可能会被内容裁剪或覆盖，但这并不重要。）
特别是，父元素的边框必须能够与其子元素的边框 * 重叠 *，这不是默认行为。CSS box-sizing属性可以设置为border-box以实现我想要的效果，但仅限于（我相信）内联元素。它对绝对定位的元素没有影响（据我所知）。
所以，我的方法是使用一个负的边距来抵消子元素的位置与边框的宽度。这看起来确实抵消了边框的存在的影响，但不幸的是，在不同的缩放因子下并不一致。在大比例下，事情看起来不错。在Chrome的默认浏览器缩放下，元素的位置有点偏离（它们看起来太高了）;如果我变小，元素的位置就会向另一个方向移动。
但是如果我完全去掉边框，布局似乎可以缩放。
所以我的问题是是否有一种可靠的（可扩展的）方法来在HTML元素上设置边框，而不影响元素的位置？
[In例如，我对一些边框使用了不同的颜色。我希望只看到黑色，但在一些缩放中，我可以看到红色和绿色边框，这表明元素的位置受到边框的影响。]
谢谢，Roly .bordered { position：绝对值;高度：18 px;边框：2 px实线;边距：-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>

css

来源：https://stackoverflow.com/questions/14706866/css-borders-interfering-with-absolute-positioning

4条答案

按热度按时间

ldioqlga1#

尝试CSS2 outline属性：

.bordered {
    outline:2px solid blue;
}

轮廓不影响元素位置。
您也可以使用CSS3 outline-offset，如下所示：http://www.css3.info/preview/outline/

赞(0）回复(0）举报 2023-04-08

6tr1vspr2#

我还发现，使用零宽度的边框（这样就不会影响布局），然后添加一个框形阴影来模拟可见的边框，似乎效果很好。

赞(0）回复(0）举报 2023-04-08

wgxvkvu93#

六年后...
其他的答案对我的情况不起作用，因为我正在样式化的框已经有了一个框阴影。我需要一个边界，就像border-left和border-radius一样，只在一边，但边界不影响元素的位置或宽度。我想出的解决方案是将边界应用于绝对定位元素的内部元素。

.outer {
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 5px;
  background-color: #c8c8c8;
}

.inner {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    border-left: solid 5px #097fee;
    border-radius: 5px;
}

<div class="outer">
  <div class="inner">
    Some content
  </div>
</div>

赞(0）回复(0）举报 2023-04-08

nwo49xxi4#

按钮默认为inline-block。因此将其更改为flex或block，然后outline和border属性将起作用。

赞(0）回复(0）举报 2023-04-08

我来回答

CSS边框干扰绝对定位

4条答案

相关问题

热门标签

最新问答