HTML 正文边距 0 搞乱了 div 定位

Question

我对这里发生的事情有点困惑。我在我的 css 中将我的 body 边距设置为 0，然后所有 div 元素都像我想要的那样在屏幕上拉伸(stretch)，但我希望这只适用于一个。来自上一个问题:HTML Image going across entire screen

一个回答说使用 position:absolute 然后改变 div 元素的位置。我曾经在这些 div 元素上使用 position:relative，当我将其更改为 absolute 时，它​​将所有 div 元素组合在一个位置。我试着用底部移动它们:然后是任何像素，但仍然根本没有移动它。这是移动它的方式吗？我该怎么办？在 W3 学校:http://www.w3schools.com/css/css_positioning.asp

它告诉我很多关于定位 div 元素的信息，但是当我尝试使用它时，它在我尝试过的一个 div 元素上不起作用，而是重叠了它。

如何移动这些 div 元素？

代码 CSS

#middle-4{
    position:absolute;
    left:0;
    right:8;
    bottom:0;
    top:-800px;}

代码 HTML

    <div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>

这样做是因为您最多可以看到 4 个 div 元素。

Answer 1

如果我正确理解你的问题，你希望所有元素都符合默认的 body 边距，除了一个元素(或使用类的多个元素)。

我会这样做...

• 为 body 指定一个特定的边距，以确保它在浏览器中保持一致。
• 使用负水平边距将您的元素拉出 body
的约束

body {
    margin: 8px;
    background: lightGreen;
}
div {
    background: lightBlue;
    padding: 30px;
    border-bottom: 1px solid blue;
}
.fullwidth {
    margin-left: -8px;
    margin-right: -8px;
}

<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>