css - 为什么我的 div 没有脱离父 div？

Question

我正在尝试脱离父 div，以便让颜色 div 覆盖浏览器的宽度。

但是，出于某种原因，它将 block 推向左侧。

这是我的 site.

这是我的代码:

HTML:

<div class="aboutTop"></div>

CSS:

.aboutTop{
   width: 100%;
   height: 600px;
   background-color: black;
   margin-left: -100%;
   margin-right: -100%;
}

我哪里错了？

Answer 1

要使您的 div 从其父级“脱离”，您必须使用 position: relative;

HTML:

<div class="aboutTop">
    <div>break out!</div>
</div>​

CSS:

div
{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

.aboutTop div
{
    position: relative;
    top: 50px; 
    left: 50px;
}

这是因为子元素被限制在它们父元素的边界内。使用定位将元素从文档流中移除。使用相对定位将其从流程中取出，但使用其在父级中的原始位置作为引用点。 Absolute 使用浏览器窗口的左上角作为引用。 :)

http://jsfiddle.net/qkU7F/

无论如何，宽度将始终引用父 div。所以你可以使用jQuery根据窗口宽度来设置元素的宽度。

var winWidth = window.innerWidth;

$('.aboutTop div').css("width", winWidth);

http://jsfiddle.net/qkU7F/3/