Относительно позиционированные элементы и абсолютно позиционированные элементы

Question

Относительно позиционированные элементы и абсолютно позиционированные элементы работают рука об руку, верно?

Абсолютно позиционированный элемент относится к ближайшему родительскому элементу, который относительно позиционирован, и если по умолчанию нет относительно позиционированного элемента, абсолютно позиционированный элемент относительно окна просмотра браузера, верно?

Если это так, если самые близкие относительно позиционированные родительские элементы находятся выше и ниже родительского элемента абсолютно позиционированного элемента, относительно которого был бы абсолютно позиционированный элемент относительно?

Answer 1

видите, абсолютный элемент всегда будет слушать своего ближайшего родственника с относительным положением , если он внутри него ,

<div relative 1> <div relative 2> <div absolute></div> </div></div>

абсолютный div будет слушать относительно 2, не имеет значения, что.

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>

Answer 3

"Элементы, которые относительно позиционированы, остаются в нормальном потоке документа. Напротив, элемент, который позиционируется абсолютно, вынимается из потока; таким образом, другие элементы позиционируются так, как если бы он не существовал. Абсолютно позиционируютсяэлемент позиционируется относительно его ближайшего позиционированного предка (то есть ближайшего предка, который не является статичным). Если позиционированный предок не существует, он позиционируется относительно ICB (начального содержащего блока), который содержит содержащий блок документакорневой элемент. "- https://developer.mozilla.org/en-US/docs/Web/CSS/position