Question

我有相对和绝对定位的问题。下面我有一个css悬停效果示例的代码。有两个图片（在一个div中）。接下来我想添加另一个带文本的div。当我试图写像＆＃34; .wtf {margin：300px}＆＃34;时，整个事情都破了）））我无法理解如何修复它。当我为第二部分添加例如保证金时：.wtf {margin-top：100px;}，我希望在第二部分和＃34; .wtf＆＃34;之间获得100px的空间。和第一部分＆＃34; .photo-line＆＃34;。而不是这个，我从页面的上方获得100px的边距，而不是在部分

之间

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>

body {
    margin: 0;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    width: 1440px;
}
.t2 {
    position: absolute;
    top: 120px;
    left: 80px;
    color: white;
    font-weight: 600;
    z-index: 1;
}

.img-overlay {
    width: 100%;
    height: 100%;
    background: #6fc3df;
    opacity: 0.75;
}
.pic-one {
    background-size: cover;
    background: blue;
    height: 409px;
    position: relative;
    width: 576px;
}
.pic-one:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:blue
}
.pic-two {
    background-size: cover;
    background-color: red;
    height: 409px;
    width: 864px;
    position: relative;
}
.pic-two:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color:red;
}
.img-overlay-two {
    width: 100%;
    height: 100%;
    background: #8d82c4;;
    opacity: 0.75;
}
.some {
    width: 1440px;
    color: white;
    background-color: #2e3450;
}
.some h3, .some p {
    margin: 0;
}
.wtf {

}
</style>
<body>
<section class="photo-line">
<div class="first-part" style="width:1440px">
    <div style="float: left" class="pic-one">
        <div class="img-overlay">
        </div>
        <div class="t2">
            <h3 style="width: 240px">Aliquam</h3>
            <p>ipsum dolor sit amet</p>
        </div>
    </div>
    <div class="second-part">
        <div style="float: right" class="pic-two">
            <div class="img-overlay-two"></div>
            <div class="t2">
                <h3 style="width: 240px">Tempus</h3>
                <p>feugiat amet tempus</p>
            </div>
        </div>
    </div>
</div>
</section>
<section class="wtf">
<div class="some">
    <h3>Massa libero</h3>
    <p>Nullam et orci eu l</p>
</div>
</section>
</body>
</html>

Answer 1

评论后更改了答案：

您first-pic和second-pic元素已浮动，因此除非您添加此规则，否则其容器.first-part将不会涵盖它们：

.first-part { 溢出：自动; }

之后，如果您添加例如“margin-top：100px to。wtf`，您将获得所需的垂直距离，如下面的代码段所示。

body {
    margin: 0;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    width: 1440px;
}
.first-part {
  overflow: auto;
}
.t2 {
    position: absolute;
    top: 120px;
    left: 80px;
    color: white;
    font-weight: 600;
    z-index: 1;
}

.img-overlay {
    width: 100%;
    height: 100%;
    background: #6fc3df;
    opacity: 0.75;
}
.pic-one {
    background-size: cover;
    background: blue;
    height: 409px;
    position: relative;
    width: 576px;
}
.pic-one:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:blue
}
.pic-two {
    background-size: cover;
    background-color: red;
    height: 409px;
    width: 864px;
    position: relative;
}
.pic-two:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color:red;
}
.img-overlay-two {
    width: 100%;
    height: 100%;
    background: #8d82c4;;
    opacity: 0.75;
}
.some {
    width: 1440px;
    color: white;
    background-color: #2e3450;
}
.some h3, .some p {
    margin: 0;
}
.wtf {
padding-top: 100px;
}

<section class="photo-line">
<div class="first-part" style="width:1440px">
    <div style="float: left" class="pic-one">
        <div class="img-overlay">
        </div>
        <div class="t2">
            <h3 style="width: 240px">Aliquam</h3>
            <p>ipsum dolor sit amet</p>
        </div>
    </div>
    <div class="second-part">
        <div style="float: right" class="pic-two">
            <div class="img-overlay-two"></div>
            <div class="t2">
                <h3 style="width: 240px">Tempus</h3>
                <p>feugiat amet tempus</p>
            </div>
        </div>
    </div>
</div>
</section>
<section class="wtf">
<div class="some">
    <h3>Massa libero</h3>
    <p>Nullam et orci eu l</p>
</div>
</section>

Answer 2

问题是你的第一部分没有任何高度，而第二部分占据了整个页面。尝试在代码中添加以下样式：

.photo-line {
    overflow: auto;
}
.wtf {
    margin-top: 100px;
}

保证金问题。不能在两个元素之间留出余量。绝对/相对定位的误解

2 个答案: