为什么 div 没有在前一个 div 之后立即堆叠？（不是边距/填充问题）答案

【问题标题】：Why div not stacked immediately after previous div ? (not margin/padding issue)为什么 div 没有在前一个 div 之后立即堆叠？（不是边距/填充问题）
【发布时间】：2016-06-29 17:51:25
【问题描述】：

我已将<div id="title"> 定位在其原始位置上方50px，div 的高度为70px。我不明白为什么<div id="page1"> 不是在标题 div 之后开始，而是在其原始高度 70px 之后开始。我该如何纠正？

* {
	margin: 0;
	padding: 0;
}
#title {
	position: relative;
	top: -50px;
	width: 100%;
	height: 70px;
	background-color: blue;
}
#page1 {
    background-color: lightgreen;
	text-align: center;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 500px;
}
#page1 img {
	position: absolute;
	top: 200px;
	left: 50px;
	width: 200px;
}
#page1 h1 {
	padding-top: 100px;
}
#page2 {
	background-color: red;
	position: relative;
	z-index: 1;
	width: 100%;
	height:800px;
}

<html>
    <head>
	    <link rel = "stylesheet" href = "style.css">
	</head>
	<body>
	    <div id = "title"></div>
	    <div id = "page1"><h1>Hello !!!</h1><img src = "https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"></div>
	    <div id = "page2"><div>
		<script src = "script.js"></script>
    </body>
</html>

【问题讨论】：

因为这是我们相对定位的工作方式。 - codepen.io/Paulie-D/pen/IuLfJ 页面会记住元素所在的位置并分配该空间，就好像元素仍然在那里一样。

标签： css

【解决方案1】：

使用相对位置和顶部属性是这里的问题。

通过声明 top: -50px div 在视觉上从其原始位置移动，但 div 仍保留其在文档流中的原始位置

您可以使用 margin-top -50px 而不仅仅是顶部。这会移动整个 div 并保留 div 之间的间距。

有关“top”属性的说明，请参阅下面的文档。 https://developer.mozilla.org/en/docs/Web/CSS/top

TL:DR

对于相对定位的元素（那些有 position:relative 的元素）指定的值会将元素移动到其在如果没有定位，则正常流动。

【讨论】：

它会影响元素的高度吗？我的意思是，如果视觉上一个 50px 高度的 div 相对于其原始位置向下移动了 10px，它会显示高度为 60px 吗？ @MatthewTilley
@DhruvChadha - 它只会将目标元素向下移动 10px。它对元素的尺寸没有影响，只有位置。

【解决方案2】：

是由top:-50px和position relative引起的；

您可以通过将 margin-top: -50px 添加到 #title div 并从中删除 top: -50px 来实现它。

#title {
    position: relative;
    margin-top: -50px;
    width: 100%;
    height: 70px;
    background-color: blue;
}

【讨论】：

【解决方案3】：

您所面临的意外行为是由使用position:relative 引起的。

为了更好地理解 relative 的工作原理，我建议阅读以下文章：

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

在您的具体情况下，您可以使用 position:absolute 而不是 relative。您可以通过这种方式实现您的结果，但方式很简单。

#title {
  position: absolute;
  top: 0x;
  width: 100%;
  height: 70px;
  background-color: blue;
}

#page1 {
  position: absolute;
  top: 70px;
  width: 100%;
  height: 500px;
  background-color: lightgreen;
}

#page2 {
  position: absolute;
  top: 500px;
  width: 100%;
  height: 800px;
  background-color: yellow;
}

<div id="title">Title</div>
<div id="page1">
Page1
  <div>
    <div id="page2">
    Page2
      <div>

如果您想坚持使用 position:relative，您可以添加此代码来修复您的代码。

示例：https://jsfiddle.net/yn8337hy/2/

#title {
  margin-top: -50px;
  position: relative;
  width: 100%;
  height: 70px;
  background-color: blue;
}

【讨论】：