绝对定位的孩子溢出父母边框

Question

我在相对（父）容器中有一个绝对定位的（子）元素。我希望绝对定位的元素跨越其容器的整个宽度，包括填充和边框。

边框/填充的大小可能不同，所以我不想硬编码偏移量。

这样的事可能吗？

<div>
    <ul>
        <li>Test</li>
        <li>Test 2</li>
        <li>Test 3</li>
    </ul>
</div>


ul {
    position: absolute;
    left: 0;
    right: 0;
    background-color: red;
    border-bottom: 3px solid blue;
}

这里有一个 JSFiddle 概述了这个问题

Answer 1

如果不手动调整，子元素就不可能覆盖其父元素的边框。即使父级上有

box-sizing: border-box

，

position: absolute

元素也只能从边框内部填充。

top: 0

将始终引用边框之前的最上面的像素。

如果您想实现此目的，则需要手动调整。

calc()

可以提供帮助，但您可能需要先查看 浏览器支持。

http://jsbin.com/qusita/1/edit?html,css,输出

.out {
  padding: 25px;
  position: relative;
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  
  background-color: #555;
  
  border: 3px solid #aaa;
}

.in {
  top: 0;
  left: -3px;
  position: absolute;
  width: calc(100% + 6px);
  height: 100%;
  
  background-color: rgba(255, 0, 0, 0.5);
}

<div class="out">
  <div class="in"></div>
</div>

顺便说一句，

ul

和

ol

元素通常具有一定量的默认边距/填充，因此请注意这一点。

---

这是使用更强大标记的替代方案。一般来说，在 CSS 中实现相似外观的方法有很多，有时你需要跳出框框（模型）思考一下。

http://jsbin.com/taluko/1/edit?html,css,输出

.one {
  padding: 5px;
  position: relative;
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  
  background-color: #777;
}

.two {
  width: 100%;
  height: 100%;
  
  background-color: #ccc;
}

.three {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  
  top: 0;
  left: 0;
  
  background-color: rgba(255, 0, 0, 0.5);
  border-top: 5px solid #555;
  border-bottom: 5px solid #555;
}

<div class="one">
  <div class="two"></div>
  <div class="three"></div>
</div>

Answer 2

如果您有父母的身高，则只需添加

top: 0

和

bottom: 0

。在这种情况下，子级将被定位在父容器中，没有填充。

但在你的情况下它不起作用，因为绝对定位的子父级将为空并且高度为 0 加填充。

作为变体，请参阅带有更新示例的小提琴： https://jsfiddle.net/5gtppy4x/1/

我刚刚为孩子添加了

top

、

bottom

，为家长添加了

height

。

Answer 3

对我来说，解决方案就是添加到父级：

overflow: hidden;