相对定位元素和绝对定位元素

Question

相对定位的元素和绝对定位的元素协同工作，对吧？

绝对定位的元素是相对于最近的相对定位的父元素，如果没有相对定位的元素，那么默认情况下，绝对定位的元素是相对于浏览器视口的，对吧？

如果这是真的，如果最接近的相对定位的父元素位于绝对定位元素的父元素的上方和下方，那么绝对定位的元素将相对于哪个元素？

Answer 1

“相对定位的元素保留在文档的正常流中。相反，绝对定位的元素会从流中删除；因此，其他元素的定位就好像它不存在一样。绝对定位的元素相对于其最近的定位祖先(即，不是静态的最近祖先)进行定位。如果定位的祖先不存在，它将相对于ICB (初始包含块)进行定位，ICB(初始包含块)是文档根元素的包含块。”- https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

根据定义，父元素总是在上面。每个元素只有一个最接近的父元素：<parent><child/><child/></parent>。

​

main {
  display: flex;
  flex-flow: row wrap;
  background-color: #00BCD4;
  padding-bottom: 3rem;
}

section {
  box-shadow: 0 0 20px black;
  min-height: 200px;
  flex: 1 0 200px;
  box-shadow: inset 0 0 20px 0px #ccc;
  background-color: #eee;
  border: 1px solid #aaa;
  margin: 3rem;
}

section > div {
  background-color: #E91E63;
  width: 40px;
  height: 40px;
}

h3 {
  color: #FFF;
  margin: 1rem 3rem 1.5rem 1rem;
  font-family: sans-serif;
  font-size: 2.5rem;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.tr {
  top: 0;
  right: 0;
}

.br {
  bottom: 0;
  right: 0;
}

.bl {
  bottom: 0;
  left: 0;
}

<main class="relative">

  <h3 class="absolute br">Child of main</h3>

  <section class="relative">
    <div class="absolute"> </div>
    <div class="absolute tr"> </div>
    <div class="absolute br"> </div>
    <div class="absolute bl"> </div>
  </section>

  <section class="relative">
    <div class="absolute"></div>
    <div class="absolute tr"> </div>
    <div class="absolute br"> </div>
    <div class="absolute bl"> </div>
  </section>

</main>

​