在 CSS 中，如果 position: absolute 的默认行为是 display:block 那么为什么我的输出显示为 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，它仍然会给出相同的输出。为什么除法元素不挡住它前面的 space？输出：

而不是：

Answer 1

正常文档流中不再存在绝对定位元素。相反，它位于自己的层上，与其他所有东西分开。它们不是根据元素在正常文档流中的相对位置来定位元素，而是指定元素与包含元素的每一侧的距离。 developer.mozilla.org/en-US/docs/Web/CSS/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>

需要将'top'或'bottom'设置为container-style才能显示所需的输出。检查这个 sandbox

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

In CSS, If the default behavior of position: absolute is display:block then why is my output showing otherwise[display:inline-block]

javascript

html

css

web