css - 使用 CSS 使子 DIV 的宽度大于父 div

Question

是否可以使子 DIV的“宽度”大于父 DIV 的“宽度”...（仅使用 css）

有关详细信息，请参阅以下示例：

http://jsfiddle.net/6UFs4/

    <div id="main">
  <div id="sidebar">DIV1
        <div id="sidebar_2">DIV1 Sub</div>
  </div>
  <div id="page-wrap">DIV2</div>
</div>

#main
{ 
    display: block;
    width: 100%;
}
#sidebar    
{
    background-color: Aqua;
    float: left;
    width: 80%;
}

#sidebar_2    
{
    background-color: Lime;
}

#page-wrap  
{
    background-color: Gray;
}

DIV1 Sub的大小应该是浏览器窗口的 100%，并且不受父 DIV 的限制。我尝试使用溢出：可见但它不起作用......

有任何想法吗？提前致谢。

Answer 1

您可以使用position:absoluteandwidth:100%;来满足您的要求，但您必须注意元素的位置（相对于页面的 x 和 y 轴），以便在所需位置显示图像

见例子：http: //jsfiddle.net/6UFs4/2/

Answer 2

只需将此 css 添加到您的子 div 中：

#sidebar_2 {
    position:absolute;
    left:0;
    right:0;
}

演示：http: //jsfiddle.net/6UFs4/4/

Answer 3

是的，你可以通过改变它的定位。

jsFiddle

#sidebar_2    
{
    background-color: Lime;
    position:absolute;
    left:0;
    right:0;
}