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.

@Huangism Thanks for your concern, but I practiced and understood basic concepts already. — undefined, Aug 08 '19 at 14:45
Sorry, if you did understand the basics, then you would not asked the question. The top, left, right and bottom values are set to `auto` by default. If you don't set them, then the positioning will be where ever it is in the code, so it will appear near your previous element — Huangism, Aug 08 '19 at 15:48

score 3 · Accepted Answer · answered Aug 08 '19 at 14:32

3

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.

answered Aug 08 '19 at 14:32

Pedro Figueiredo

2,304
1
11
18

Please see my updated question. – undefined Aug 08 '19 at 14:44
The containing block will always be nearest element that has either relative or absolute position set. Only if any element is found, the containing block will be the body element, meaning it will be relative to the "whole" page content. As the image has the position:relative set, it will be the "Irene" block element. If you still didn't understand, I advise you to read https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ , it really describes it as easly at it can get. – Pedro Figueiredo Aug 08 '19 at 16:22
I read all about the link, but your explanation is not enough. In my question, class of text is `swiper__img__title` and image with `position:relative` is `swiper__img__main`. Important thing is that they are siblings, not parent-child relationship. Therefore, it cannot be positioned relative to `swiper__img__main`. Text must be positioned relative to whole document because there is no parent element who is relative. – undefined Aug 09 '19 at 05:02
1

Ok so, you agree that swiper__img__title is a sibbling of swiper__img, right? And you can see that swiper__img has position:absolute set, right? Well, the swiper__img__title element will look for either position:relative and position:absolute, and whatever is the first that he finds, he will make that the containing block. Any doubt? – Pedro Figueiredo Aug 09 '19 at 08:50
Before I see your answer, I looked for reason and I understood. Anyway, thx for your comments! – undefined Aug 09 '19 at 08:58

Why absolute positioned element looks at its sibling element?

1 Answers1