Question

我将<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>

Answer 1

由top引起：-50px和位置相对;

你可以实现它添加margin-top：-50px到#title div并从中删除top：-50px。

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

Answer 2

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

通过说明顶部：-50px div正在从其原始位置可视地移动但是div仍然保留其在文档流中的原始位置

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

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

TL：DR

对于相对定位的元素（位置相对的元素）指定的值将元素移动到其位置的下方或上方正常流量，如果它没有定位。

Answer 3

您遇到的意外行为是由使用position:relative。

引起的

为了更好地了解相对的工作方式，我建议您阅读以下文章：

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

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

#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;
}

为什么div不会在之前的div之后立即堆叠？（不是保证金/填充问题）

3 个答案:

为什么div不会在之前的div之后立即堆叠？ （不是保证金/填充问题）

3 个答案:

为什么div不会在之前的div之后立即堆叠？（不是保证金/填充问题）