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;
}

Here's a JSFiddle outlining the issue

Answer 1

如果不进行手动调整，则无法让子元素覆盖其父元素的边框。即使父项为box-sizing: border-box，position: absolute元素也只会从边框内填充。 top: 0将始终引用边框前最顶部的像素。

如果您想要实现这一点，则需要手动调整。 calc()可以提供帮助，但您可能需要先查看browser support。

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

.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＆amp; ol元素通常具有一定量的默认边距/填充，因此请注意这一点。

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

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

.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。

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

2 个答案: