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

Even if I override the display property to block , it still gives the same output. Why isn't the division element blocking the space ahead of it?即使我将display属性重写为block ，它仍然给出相同的 output。为什么 division 元素不阻塞它前面的空间？ Output: Output：

Rather than:而不是：

Answer 1

An absolutely positioned element no longer exists in the normal document flow .绝对定位的元素不再存在于正常的文档流中。 Instead, it sits on its own layer separate from everything else.相反，它位于自己的层上，与其他所有东西分开。 Rather than positioning the element based on its relative position within the normal document flow, they specify the distance the element should be from each of the containing element's sides.与其在正常文档流中基于其相对 position 定位元素，它们指定元素应与包含元素的每一侧的距离。 developer.mozilla.org/en-US/docs/Web/CSS/position (the "containing element" is the initial containing block.) top, bottom, left, and right use to position that relative to containing block. developer.mozilla.org/en-US/docs/Web/CSS/position （“包含元素”是初始包含块。）顶部、底部、左侧和右侧使用相对于包含块的 position。

explain reason with your code ---用你的代码解释原因---

/* 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>

need to set 'top' or 'bottom' to container-style to display required output. check this sandbox需要将“顶部”或“底部”设置为容器样式以显示所需的 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