Question

有没有办法让子div在下面覆盖其父max-width以拉伸到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

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

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

注意：我评论了这个位置：绝对能够说明这个概念是如何运作的。

Answer 2

如果您可以使用 vw ，请尝试以下操作：

Can I use

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

Fiddle for you

CSS使绝对子div覆盖绝对父max-width

2 个答案: