Question

我正在尝试研究和理解职位absolute和relative。

方案1（相对）：

* {
		padding: 0;
		margin: 0;
	}
	
	#container {
		width: 100%;
		background-color: black;
	}

	#box1 {
		width: 50%;
		position: relative;
		left: 20px;
		color: white;
		background-color: blue;
	}

<div id="container">
		
		<div id="box1">
			
			<h1>This is box 1</h1>

		</div>

	</div>

我可以完全理解以上内容。指定相对位置后，它会从其正常位置的左侧移动20px。所以我的理论研究确实有意义，这很清楚。

现在，当我尝试这种情况时-方案2（绝对）：

* {
		padding: 0;
		margin: 0;
	}
	
	#container {
		width: 100%;
		background-color: black;
	}

	#box1 {
		width: 50%;
		position: absolute;
		left: 20px;
		color: white;
		background-color: blue;
	}

<div id="container">
		
		<div id="box1">
			
			<h1>This is box 1</h1>

		</div>

	</div>

问题：为什么黑色背景消失了？据我了解，box1应该从其父级（它是当前使用我绝对位置的浏览器）向左移动20px。

它确实会移动，但是为什么缺少黑色背景（在其父级中设置）？ Box1不嵌套在其中吗？为什么会丢失？

我尝试使用谷歌搜索，但我无法理解这种逻辑，因此很高兴有人可以将我指向正确的方向。

Make absolute positioned div expand parent div height

我试图看一下这个问题，但是，我又一次不明白正确的答案。

Answer 1

尝试设置#container的高度，因为position: absolute从<div id="box1">中取出<div id="container">，原因是position是{{ 1}}。对于DOM来说，static似乎什么也没有，也没有任何呈现：

#container

请查看<div id="container">之间的区别：

#container {
    width: 100%;
    background-color: black;
    height: 100px;
}

和position:static：

.parent {
    border: 2px solid #0074d9;
    background-color: lightgreen;
    color: #0074d9;
    padding: 5px;
    position: static;
    height: 100px;

  }

  .element {
    border: 1px dotted #000;
    background-color: lightgray;
    color: red;
    position: absolute;
    left: 0;
    bottom: 25px;
  }

在position: relative;中，我们的子容器将放置在父元素内。 Please, read this great article about position:absolute.

Answer 2

您的.container元素没有被其绝对定位的子元素“保持打开”状态，因此正在折叠（高度为0）。您可以通过在相应的CSS中定义一个height来填充父级填充来进行测试。

#container {
    width: 100%;
    background-color: black;
    height: 100px; /* for example */
}

* {
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  background-color: black;
  height: 100px; /* for example */
}

#box1 {
  width: 50%;
  position: absolute;
  left: 20px;
  color: white;
  background-color: blue;
}

<div id="container">

  <div id="box1">

    <h1>This is box 1</h1>

  </div>

</div>

不请自来的建议：当我试图确定CSS规则令人费解的效果时，为有问题的元素分配border值会很有帮助。我发现这有助于揭示我的样式规则的潜在结构性影响。例如，.container上的边框表明它仍然仍然存在；如果不可能的话。

#container {
  border: 2px solid lime; /* it helps if it doesn't blend in with your existing page palette, too */
  width: 100%;
  background-color: black;
}

* {
  padding: 0;
  margin: 0;
}

#container {
  border: 2px solid lime; /* for example */
  width: 100%;
  background-color: black;
}

#box1 {
  width: 50%;
  position: absolute;
  left: 20px;
  color: white;
  background-color: blue;
}

<div id="container">

  <div id="box1">

    <h1>This is box 1</h1>

  </div>

</div>

Answer 3

由于绝对定位的元素不会占用其空间，而是围绕相对元素设置。
因此，在您的结构中，需要给"#container“加上高度或一些填充。

#container {
    width: 100%;
    background-color: black;
    height: 200px;
}

绝对位置使父div丢失

3 个答案: