如何将绝对定位的子元素扩展到全屏宽度？

Question

我的水平条在左右两边都有一些边距。 我想在栏后面添加叠加层并希望拉伸到全屏宽度（就像模态对话框叠加层一样）但叠加层的顶部位置应该与栏的顶部位置相同，并且覆盖层的底部位置应该与栏的底部位置相同. 但是，由于左右间距，我无法将其拉伸到全屏宽度。所以我尝试添加等于左/右边距值的负左/右位置以使其全屏显示。 然而，这个不合适的解决方案似乎是合适的，因为左/右的边距将来可以是任何值，并且不是硬编码的。 有没有理想的通用解决方案。

下面是sn-p的代码：

<div class="parent">
  <div class="bar"></div>
  <div class="overlay"></div>
</div>

.parent {
  position: relative;
  margin-left: 50px; --> Margins can be any value not just hardcoded
  margin-right: 50px;
}

.bar {
  height: 50px;
  background: blue;
}
.overlay {
  z-index: -1;
  position: absolute;
  background: purple;
  left: -50px; --> Set negative position to stretch it to fullscreen but not seems to be proper solution as margin can be of any value
  top: 0;
  right: -50px;
  bottom: 0;
}

Answer 1

您可以将 overlay 移出父元素，并删除所有这些边距。

body {
  margin: 0;
}
.parent {
  position: relative;
  padding-left: 50px; 
  padding-right: 50px;
}

.bar {
  height: 50px;
  background: blue;
}
.overlay {
  z-index: -1;
  position: absolute;
  background: purple;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<div class="parent">
  <div class="bar"></div>
  <div class="overlay"></div>
</div>

Answer 2

我想你想要这个

<div class="parent"> 
    <div class="overlay">
        <div class="bar"></div>
    </div> 
 </div>

添加这些样式

body {
    margin:0;
}

.parent { 
    margin-left: 50px;
    margin-right: 50px; 
}

.bar { height: 50px; background: blue; }
  
.overlay { 
    z-index: -1; 
    position: absolute; 
    background: purple; 
    left: 0;
    top: 0;    
    right: 0; 
    bottom: 0; 
}

Answer 3

将position: fixed 用于.overlay。并设置左右0。更多关于fixed

body {
  margin: 0
}
.parent {
  position: relative;
  margin-left: 50px;
  margin-right: 50px;
}
.bar {
  height: 50px;
  background: blue;
}
.overlay {
  z-index: -1;
  position: fixed;
  background: purple;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<div class="parent">
  <div class="bar"></div>
  <div class="overlay"></div>
</div>