绝对定位在相对内部，宽度为 100%

Question

是否有办法将绝对元素的宽度设置为 100% 并使屏幕（而不是父元素）适合相对元素？这是我的代码

<div class="relative">

     ...

     <div class="absolute"></div>

     ...

</div>

CSS代码：

.relative{

position:relative;
width:600px;
}

.absolute{

border:1px solid red //draw a line across screen

position:absolute;
width:100%;
}

Answer 1

是的，您可以使用100vw等于窗口宽度的值，也可以使用calc绝对元素的位置。因此，如果父元素的宽度是50%将绝对元素定位到left: 0窗口，则可以使用transform: translate(calc(-100vw + 75%))在本例中等于 的宽度-25vw。

html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.relative {
  position: relative;
  width: 50%;
  background: lightblue;
  height: 50px;
  margin: 0 auto;
}
.absolute {
  position: absolute;
  left: 0;
  background: black;
  height: 2px;
  top: 50%;
  width: 100vw;
  transform: translate(calc(-100vw + 75%), -50%);
}

<div class="relative">
  <div class="absolute"></div>
</div>