Why absolute positioned element looks at its sibling element?

Question

I already looked Why absolute positioned element depends on it's sibling?, but I couldn't understand. So, I create new question for the clear understanding about stacking context.

.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>

I expected that "IRENE" is left-top of document, but it depends to its image. In this situation, I thought much time for understanding stacking contexts. However, it is too complicated for me and I cannot solve this problem. How can I handle this and what is the missing things about this situation?

UPDATE

What I want to know is that why text depends on position:relative element which is sibling element?

By the MDN, absolutely positioned element depends on it's containing block. Am I wrong? What's the problem?

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; looks for the nearest element with position:relative/absolute, and makes his position, based on that element.

In your case, as you have position:relative in the image, the "Irene" text will be placed at the top left corner of the image.

For "Irene" to be at the top left of the document, you either apply position:fixed, wich is based on the browser window, or remove all the position:absolute/relative that are above the "Irene" element.