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

有没有什么办法让子div覆盖其父母最大宽度延伸到100％的页面宽度？双方父母和孩子是绝对位置CSS使绝对子div覆盖绝对父母最大宽度

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

也是上述容器当前位于内的另一个图像div容器设置为位置：相对

来源

2015-03-30 L457

不，这是不可能的。而你的意思是_“，上面的容器当前也在另一个”_“中浮动 - 绝对定位的元素不能”浮动“。 – CBroe 2015-03-30 18:49:40

nop除非你使用vw单元，但看起来你应该重新思考你的方法。绝对，浮动最大宽度但100％视口，听起来很奇怪:) – 2015-03-30 18:50:15

如果你可以使用大众那就试试这个：

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

来源

2015-03-30 18:54:12

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

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

注：我注释掉的位置：绝对能够说明这个概念是如何工作的。

来源

2015-03-30 19:07:51

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

回答

相关问题