为什么 2 个元素带有 display: inline-block;位置：绝对；彼此重叠而不是彼此相邻？

Question

我知道我应该使用 position: relative;以便它遵循两个元素的内联块行为，这样它们就不会重叠并彼此相邻放置，因为每个元素都被识别为一个块

但我很好奇，当位置是绝对的时，它不再将该元素识别为块并允许重叠，为什么这样？

例如 1:-

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Hello </title>
  </head>
  <body>
    <div class="container" style="display:inline-block; background-color:black; height:500px; width:500px; position: relative; left:20px;">
      <div class="red" style="display:inline-block; background-color:red; height:100px; width:100px; position: absolute;"></div>
      <div class="blue" style="display:inline-block; background-color:blue; height:100px; width:100px; position: absolute; left:20px;"></div>
    </div>
  </body>
</html>

2:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Hello </title>
  </head>
  <body>
    <div class="container" style="display:inline-block; background-color:black; height:500px; width:500px; position: relative; left:20px;">
      <div class="red" style="display:inline-block; background-color:red; height:100px; width:100px; 
      position: relative;"></div>
      <div class="blue" style="display:inline-block; background-color:blue; height:100px; width:100px; position: relative;"></div>
    </div>
  </body>
</html>

Answer 1

具有绝对位置的元素不在正常流中。文档流是页面元素的排列，由 CSS 定位语句和 HTML 元素的顺序定义。也就是说，每个定义如何占据 space 以及其他元素如何相应地定位自己。看一看：https://soulandwolf.com.au/blog/what-is-document-flow/#:~:text=by%20John%20Rosato,other%20elements%20position%20themselves%20accordingly. and this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow

Answer 2

当设置为绝对定位时，该元素会寻找距离最近的有positioning的父元素进行定位。相对定位是指这个元素相对于它所在位置的变化。

为什么 2 个元素带有 display: inline-block;位置：绝对；彼此重叠而不是彼此相邻？

Why do 2 elements with display: inline-block; position: absolute; overlap over each other instead of being right next to each other?

html

css

css-position