0

I've read a couple of answers on this topic, for example: Position absolute but relative to parent, but I still don't understand why the position of the ancestor element must be either position: relative or position: absolute.

Why is an element with position: static ignored by position: absolute?

Connor
  • 867
  • 7
  • 18
  • 1
    The answer to your why is simple: it was defined that way – Temani Afif Aug 11 '22 at 22:48
  • @TemaniAfif At the risk of sounding obtuse, why was it defined that way? What was the underlying reason? – Connor Aug 11 '22 at 22:53
  • 1
    you need to dig into the history of CSS to know this. Such feature is one of the oldest one and there is for sure a discussion somewhere about why such decision was made. – Temani Afif Aug 11 '22 at 23:06

1 Answers1

2

For one thing, the premise is incorrect. There are situations where a statically positioned element can provide the containing block of an absolutely positioned element. position, transform, will-change and contain are all properties that will cause an element to establish an absolute positioning containing block

For example:

.outer {
  width:50vw;
  height:50vh;
  background-color:lightblue;
  margin: 25vh 25vw;
  transform:translateX(0);
}
.inner {
  position:absolute;
  width:100px;
  height:50px;
  inset: 0;
  background-color:red;
}
  <div class="outer">
    <div class="inner"></div>
  </div>
Alohci
  • 78,296
  • 16
  • 112
  • 156
  • So there are special ways to make sure a static element contains an absolute one? If that is the case, why isn't that behaviour default? How does absolute select its positioning ancestor and why? – Connor Aug 11 '22 at 22:46
  • 1
    I tried to keep the full list of properties here: https://stackoverflow.com/a/52937920/8620333 – Temani Afif Aug 11 '22 at 22:47
  • 1
    @Connor I don't know the history well enough to answer that. Maybe someone else knows better. But I can make a guess. Start with the idea that the purpose of absolute positioning is to be able to place an element/box anywhere on the canvas. The last thing you want is every ancestor to get in the way of that positioning. A lot of the reasons enumerated by Temani's linked answer are simply pragmatic decisions made to make the features implementable. It's possible, but by no means certain, that the same applies to positioned elements. – Alohci Aug 11 '22 at 22:54