为什么绝对定位元素看它的兄弟元素？

Question

我已经看过，但我看不懂。因此，我提出了一个新问题，以便清楚地了解堆叠上下文。

.swiper__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%,-50%);
  transition: top .5s;
  width: 400px;
  cursor: pointer;
}
.swiper__img:hover {
  top: 45%;
}
.swiper__img:hover .swiper__img__left,
.swiper__img:hover .swiper__img__right {
  opacity: 0.5;
}
.swiper__img:hover .swiper__img__left { left: -5%; }
.swiper__img:hover .swiper__img__right { right: -5%; }

.swiper__img__main {
  position: relative;
  background-image: url('https://user-images.githubusercontent.com/35518072/62710517-707ecc80-ba32-11e9-825d-387e37b71eba.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 150%;
  z-index: 1;
}
.swiper__img__left {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('https://user-images.githubusercontent.com/35518072/62710476-52b16780-ba32-11e9-85ce-23d2421e641e.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 150%;
  transition: all .5s;
}
.swiper__img__right {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('https://user-images.githubusercontent.com/35518072/62710535-75dc1700-ba32-11e9-9b05-80bc6d9980a7.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 150%;
  transition: all .5s;
}
.swiper__img__title {
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 0;
  color: white;
  letter-spacing: 5px;
  z-index: 2;
  font-weight: 100;
  font-family: 'Libre Caslon Display', serif;
}
body {
  transition: background-color .5s;
}

<div id="fullpage" class="swiper">
    <div class="swiper">
      <div class="section">
        <div class="swiper__img">
          <div class="swiper__img__main"></div>
          <div class="swiper__img__left"></div>
          <div class="swiper__img__right"></div>
          <h2 class="swiper__img__title">IRENE</h2>
        </div>
      </div>
      <div class="section">
        <div class="swiper__img">
          <div class="swiper__img__main"></div>
          <div class="swiper__img__left"></div>
          <div class="swiper__img__right"></div>
          <h2 class="swiper__img__title">IRENE</h2>
        </div>
      </div>
    </div>
  </div>

我预计 "IRENE" 在文档的左上角，但这取决于它的图像。在这种情况下，我花了很多时间来理解堆叠上下文。但是，这对我来说太复杂了，我无法解决这个问题。我该如何处理这种情况，这种情况缺少什么？

更新

我想知道的是，为什么文本依赖于同级元素position:relative元素？

根据 MDN，绝对定位的元素取决于它的包含块。我错了吗？有什么问题吗？

An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.

Answer 1

position:absolute;寻找距离最近的元素position:relative/absolute，并根据那个元素。

在您的情况下，由于图像中有 position:relative，因此 "Irene" 文本将放置在图像的左上角。

要使 "Irene" 位于文档的左上角，您可以应用 position:fixed，这是基于浏览器 window，或删除 "Irene" 元素上方的所有 position:absolute/relative。

为什么绝对定位元素看它的兄弟元素？

Why absolute positioned element looks at its sibling element?

css

z-index

css-position