Confussion with the effect of absolute property on elements after it

Question

I have two elements, one is set as relative, and another is set as absolute

.container {
  position: relative;
}

.target {
  position: absolute;
}

<div class="container">
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
  <div class="target">Target</div>
  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</div>

Here is the result, Target overlapped with the paragraph

Question: in my understanding, a session that is set as absolute means it will relative to the closet element which is set as relative. So I understand why "Target" will just be right below "relative" elements. But why the paragraph will overlap with target? Should it be located right below target element

In my code above example, I expect it will show like this. So I am confused.

Edit:

Even though this question seems to be asked many times, many people are still failed to get it clearly, this proved there is still much confusion in other answers.

So, I have read many answers and still got confusion by other answers, which doesn't explain well for my experience. But I got my understanding from relative and absolute in this question.

So I try to sum up a bit, if there are others who still got confusion and at some point, read this post. Hope it helps.

I will explain it from my example.

First, aside from the understanding of removing from normal flow, one may understand absolute in a way that any elements after it will ignore it. In my example, the reason why we see "target" overlap with paragraph is that paragraph just ignore it. That's why we see this effect.

So, if relative and absolute can also be tweaked, what is the difference?

First, when we want an element to be tweaked relative to its original position. We set it as relative.

If we want to tweak it relative to the html, we set it as relative. So yes, absolute doesn't mean it wont be relative to anything. Plus, it will also be relative to its nearest relative elements.

*should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned* — Temani Afif, Jul 12 '22 at 10:06

score 0 · Answer 1 · answered Jul 12 '22 at 02:20

0

Basically, how absolute position works is the same as relative, except it doesn't affect elements that come after it. For example, if we have

<div class="container">
  <div class="p-relative">Section 1</div>
  <div class="p-relative">Section 2</div>
  <div class="p-relative">Section 3</div>
</div>

Section 2 will appear after section 1, and section 3 will appear after section 2. But with absolute position, it will behave differently.

<div class="container">
  <div class="p-relative">Section 1</div>
  <div class="p-absolute">Section 2</div>
  <div class="p-relative">Section 3</div>
</div>

Here, section 2 is absolute. It will appear after section 1, same as before.

Section 3, however, ignores the fact that section 2 exists. So section 3 also appears immediately after section 1. Since section 2 and 3 both appear in the same place, that causes the overlap.

answered Jul 12 '22 at 02:20

anut

481
1
11

That makes sense to me. So basically relative is useless? As in the fact that even if we dont make the parent as relative, its child will also be situated right after it right? However , If parent is set as absolute , its child will ignore it. This may be useful in some cases even it sounds a bit strange to me now – Jul 12 '22 at 02:42
@hose The behavior described in my answer is the default behavior, which only occurs if you do not specify a `top`, `left`, `right`, or `bottom` property in the css. If you added `top: 10px` to the css of the target, then it would display 10 pixels from the top of the container. I hope this clears it up. – anut Jul 12 '22 at 02:48
So, anything after absolute like "section 3" will ignore section 2. But section 1 will be set as the offset of section 2. We can control section 2 by top left right bottom. – Jul 12 '22 at 05:56
@hose That's right. – anut Jul 12 '22 at 13:44

score 0 · Answer 2 · answered Jul 12 '22 at 02:28

A component with position: absolute is expelled from the typical index stream. It is situated naturally to the beginning stage (upper left corner) of its parent component. On the off chance that it doesn’t have any parent components, at that point the underlying archive will be its parent. So making parent div as absolute and its child as relative will make the alignment of child div right after the parent which does not collide. Hope this helps.

.container {
  position: absolute;
}

.target {
  position: relative;
}

<div class="container">
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
  <div class="target">Target</div>
  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</div>

I dont get it. This is the same as making no any css style to the classes. What is the difference ? — , Jul 12 '22 at 02:44

Confussion with the effect of absolute property on elements after it

2 Answers2