Question

如果我相对显示一个div并给它一个上边距，我是否还必须给出以下所有内容相同的上边距？因为后面的内容将位于元素的常规位置之后。

正如您在此处所看到的，blue div位于red之上，紧跟蓝色原始位置。

有没有办法让red 20px更低，而不是relative？换句话说，不要使用以下所有内容。

#a {
  width:100%;
  background-color:yellow;
  height:50px;
}
#b {
  position:relative;
  top:20px;
  width:50%;
  background-color:blue;
  height:50px;
}
#c {
  width:100%;
  background-color:red;
  height:50px;
}

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

Answer 1

将margin-top: 20px;添加到#c。 @HashemQolami是对的，如果可以的话，在{b而不是位置margin-top上使用relative来维护你的CSS会更容易。

Answer 2

最简单的方法是将margin-top的{{1}}设置为20px，然后#b将跟随它。

＆＃13;

#c

＆＃13;

#a {
  width:100%;
  background-color:yellow;
  height:50px;
}
#b {
  margin-top:20px;
  width:50%;
  background-color:blue;
  height:50px;
}
#c {
  width:100%;
  background-color:red;
  height:50px;
}

＆＃13;

这样，它就不会从文档流中删除<div id="a"></div> <div id="b"></div> <div id="c"></div>。

Answer 3

您可以将margin-bottom: 40px;添加到#b元素：

＆＃13;

#a {
    width:100%;
    background-color:yellow;
    height:50px;
}
#b {
    position:relative;
    top:20px;
    width:50%;
    background-color:blue;
    height:50px;
    margin-bottom: 40px;
}
#c {
    width:100%;
    background-color:red;
    height:50px;
}

＆＃13;

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

＆＃13;

或margin-top: 40px;到#c元素：

＆＃13;

#a {
    width:100%;
    background-color:yellow;
    height:50px;
}
#b {
    position:relative;
    top:20px;
    width:50%;
    background-color:blue;
    height:50px;
    
}
#c {
    width:100%;
    background-color:red;
    height:50px;
    margin-top: 40px;
}

＆＃13;

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

＆＃13;

要么工作。

Answer 4

将余量40px添加到#c

的顶部

相对放置div后的内容

4 个答案: