绝对位置使父 div 丢失答案

【问题标题】：Absolute position makes parent div missing绝对位置使父 div 丢失
【发布时间】：2019-06-05 09:59:32
【问题描述】：

我正在努力学习和理解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

我试着看看这个，但是，我又一次没有理解正确的答案。

【问题讨论】：

设置位置时：绝对；您将该元素从文档流中取出，因此对于父元素，它看起来里面没有任何东西，所以它折叠到 0 高度，这是关于定位的好读物：css-tricks.com/almanac/properties/p/position
啊，我明白了。所以我必须手动设置父 div 的高度以匹配子 div 与绝对位置？是这样完成的吗？
正确。这就是为什么 position: absolute;用于非常特殊的情况，否则大部分时间会破坏布局
太棒了，谢谢。是的，我尝试手动设置高度并且它有效。是的，我同意，除非真的需要，否则我不会使用它。它确实打破了网站的布局。如果您可以将此作为答案发布，我会将其标记为答案！谢谢朋友。
我出去吃午饭了，但不用担心答案，我很高兴能帮上忙

标签： css

【解决方案1】：

由于绝对定位元素不占用其空间并围绕相对元素设置。
因此，在您的结构中，您需要为 "#container" 提供高度或一些填充。

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

【讨论】：

【解决方案2】：

尝试设置#container 的高度，因为position: absolute 将您的<div id="box1"> 从<div id="container"> 中取出，因为默认情况下position 是static 的#container。对于 DOM，它看起来像 <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;：

.parent {
    border: 2px solid #0074d9;
    background-color: lightgreen;
    color: #0074d9;
    padding: 5px;
    position: relative;
    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.

【讨论】：

【解决方案3】：

您的 .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>

【讨论】：