0

I am self-learning HTML/CSS and I mostly understand the different position properties, but the difference between static and relative seems a little weird to me. Is relative the same as static except that you can set top/bottom/left/right values for it, and you can position absolute elements inside it?

I know you can't set top/bottom/left/right values for static elements and that absolute elements will not be positioned according to parent static elements (only parent relative/fixed elements or the whole html element if there is no parent element/only static parent elements), but why? Is there an answer besides "that's just how static elements are"?

In that case why would you ever use a static element instead of a relative element? Aren't they basically the same thing except that you can set more properties for the relative elements that you can't for static elements? Is it just because static is the default, so you don't need to bother changing it if you don't need to use those other properties? Why would it be the default though if it is just a less useful version of relative?

That kind of ended up being a lot of questions, so for clarity I guess the answer I am looking for boils down to (1) is my understanding of the difference between relative and static correct, and (2) why would you use static instead of relative?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
tjt
  • 3
  • 3
  • [MDN does a pretty good job of explaining the values](https://developer.mozilla.org/en-US/docs/Web/CSS/position#values), including "and then offset relative to itself based on the values of `top`, `right`, `bottom`, and `left`." So, if you have a set of paragraphs (like those in your question), which you just want to be laid out in the normal flow, and don't want to rearrange, why add the complexity of checking for `top` and all that when laying them out? – Heretic Monkey Oct 19 '22 at 23:05
  • The difference between both is more that what you have listed here. There is the z-index, the containing block of absolute element, etc – Temani Afif Oct 19 '22 at 23:05

0 Answers0