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

Question

我正在尝试突破父 div，这样我就可以让一个颜色 div 覆盖浏览器的宽度。

但是，由于某种原因，它将块推向了左侧。

这是我的代码：

HTML：

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

CSS：

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

我哪里错了？

score 1 · Accepted Answer

要使您的 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 使用浏览器窗口的左上角作为参考。:)

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

var winWidth = window.innerWidth;

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

score 0 · Accepted Answer

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

然后根据需要对子 div 应用填充。

score 0 · Accepted Answer

在这：

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

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

所以如果父元素是 200px 宽 100% 将是 200px。

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

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

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

score 0 · Accepted Answer

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

当你给一个 width:100% 没有定位时，它会占用 100% 相对于父分割。您需要将其固定，或者您需要更改父分区的宽度。

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

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

score 0 · Accepted Answer

你正在设置width: 100%但也margin-left: -100%。这意味着该元素的范围从 -100% 到 0。

由于您也在设置margin-right: -100%它看起来您希望它从 -100% 到 +200%，这意味着您需要设置width: 300%。

5 回答 5