为什么我的div没有突破父div？

Question

我正在尝试突破父div，因此我可以使用颜色div覆盖浏览器的宽度。

然而，由于某种原因，它将块推向左侧。

这是我的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/

Answer 2

在此：

margin-left: -100%;
margin-right: -100%;

百分比是相对于父元素的。

因此，如果父元素为200px宽，则100％将为200px。

如果你想要某些东西跨越浏览器的宽度，你有几个选择：

使用绝对位置和left:0; right:0;

使元素成为body元素的直接子元素，并将其宽度设置为100％

Answer 3

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

如果给出宽度：100％没有定位，则相对于父分区将占用100％。您需要修复它，或者您需要更改父分区的宽度。

您编写的代码必须从一开始就针对您想要实现的目标。对于这样的事情，你不应该有一个宽度较小的父分区。

如果您使用相对定位，或绝对使用负边距，则宽度仍将是父分区的100％。您必须将宽度增加到110％才能实现。

Answer 4

我认为最好删除div #site的填充。让它拥有全宽的浏览器。

然后根据需要对子div进行填充。

Answer 5

您正在设置width: 100%，但也设置margin-left: -100%。这意味着元素将从-100％跨越到0。

由于您还设置了margin-right: -100%，因此您希望它的范围从-100％到+ 200％，这意味着您需要设置width: 300%。