CSS使绝对子div覆盖绝对父最大宽度

Question

有没有办法让下面的子div覆盖其父最大宽度以拉伸到100%页面宽度？父母和孩子都是绝对位置

<div class="container" style="max-width:500px;position:absolute;">

  <div class="content"></div>
  <div class="special-content" style="position:absolute;width:100%"></div> <!--override to 100% page width? -->
  <div class="content"></div>
  <div class="content"></div>

<div>

此外，上述容器当前位于另一个设置为position:relative的图像容器div中

Answer 1

如果你能使用大众，那么试试这个：

我可以用吗

<div id="parent">
    Yay!
    <div id="child">ABC123</div>
</div>

#parent {   
   position: absolute;
   max-width: 500px;
   border: 1px solid gray;
}

#child {
   position: absolute;
   width: 100vw;
   border: 1px solid yellow;
}

为你拨弄

Answer 2

你可以这样做。这将强制特殊内容容器的宽度填充窗口的宽度，超出父容器的宽度。

JSfiddle：http://jsfiddle.net/tm752gr0/4/

HTML:

<div class="container">
    <div class="content"></div>
    <div class="content special-content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

CSS:

.container {
    max-width:500px;
    margin:0 auto;
    /* position:absolute; */
    border:1px solid #000;
}
.special-content {
    margin:0 -1000px;
    padding:0 1000px;
    /* position:absolute; */
    width:100%;
    border:1px solid #000;
}
.content {
    overflow:hidden;
    display:block;
    border:1px solid #000;
    width:100%;
}
* {
    height:30px;
}
body {
    overflow-x:hidden;
}

注意：我注释掉了position:absolute，以便能够说明这个概念是如何工作的。