在 CSS 中，如果 position: absolute 的默认行为是 display:block 那么为什么我的 output 显示为 otherwise[display:inline-block]

Question

div
{
  width:200px;
  height:200px;
  position: absolute;
}

.first-container
{
  background-color: #9AD0EC;
}

.second-container
{
  background-color: red;
  left: 200px;
}

.third-container
{
  background-color: blue;
  left:400px;
}

即使我将display属性重写为block ，它仍然给出相同的 output。为什么 division 元素不阻塞它前面的空间？ Output：

而不是：

Answer 1

绝对定位的元素不再存在于正常的文档流中。 相反，它位于自己的层上，与其他所有东西分开。 与其在正常文档流中基于其相对 position 定位元素，它们指定元素应与包含元素的每一侧的距离。 developer.mozilla.org/en-US/docs/Web/CSS/position （“包含元素”是初始包含块。）顶部、底部、左侧和右侧使用相对于包含块的 position。

用你的代码解释原因---

/* when you give 'div' style like this nested div's also get position absolute*/
/* absolute positioned elements positions relative to its nearest positioned element.*/
/* then each container div's positioned relative to its nearest div */
/* comment this div style and use below div for solution. */
div { 
width: 200px;
height: 200px;
position: absolute;
}

/* positioned relative to upper div */
.first-container {
background-color: #9ad0ec;
}

/* positioned relative to nearest positioned (first-container) div */
.second-container {
background-color: red;
left: 200px;
}
/* positioned relative to nearest positioned (second-container) div */
.third-container {
background-color: blue;
left: 200px;
top: 200px;
}
<body>
<div>
  <div class="first-container" />
  <div class="second-container" />
  <div class="third-container" />
</div>
</body>

需要将“顶部”或“底部”设置为容器样式以显示所需的 output。检查此沙箱

在 CSS 中，如果 position: absolute 的默认行为是 display:block 那么为什么我的 output 显示为 otherwise[display:inline-block]

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-03-15 06:29:42

在 CSS 中，如果 position: absolute 的默认行为是 display:block 那么为什么我的 output 显示为 otherwise[display:inline-block]

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-03-15 06:29:42

解决方案1
2 已采纳 2022-03-15 06:29:42