Relative and absolute position

HTML-CSS
#1

Hey guys,
so i’ve been messing with relative and absolute position and my question is:
an inline element with position:relative wont respect it width or height. Because of its inline condition.
But why an inline element with position:absolute will do it? As you can see in the example below it respects its 100x100 px. Why? Its because it puts the element out of the normal flow so any display wont work on it anymore?
For example:

<style>
.square1{
  background-color:red;
  height: 100px;
  width: 100px;
  display:inline;
  position: relative;

}
.square2{
  background-color:blue;
  height: 100px;
  width: 100px;
  display:inline;
  position:absolute;

}
</style>
<body>
<div class="square1">wawaw </div>
<div class="square2"> rewrew</div>
</body>
1 Like
#2

The quick answer is that inline elements simply ignore any height or width value you give it. In order to have an inline element that has height or width, use display:inline-block

1 Like
#3

the absolute position ignores inline and has a width and height of

1 Like
#4

Yes!
So what i understand by now is that:

  1. Inline elements wont respect w/h. Thats why we put the display:inline-block so it can get the w/h desired.
  2. Inline elements wont respect w/h. But if we put the element in a position:absolute it will ignore the display:inline, respecting again the w/h (see square2 in the example above). This won’t happen in a position:relative (square1).
    So my question is: it’s because the position:absolute get the element out of the natural flow and just dont care about the display anymore? If that’s the case, the relative position dont get the element outside the natural flow?.
    Thank you guys!
#5

That’s right, an element with position:relative is still positioned within the normal flow of the document.

As for inline elements with position:absolute, they’re treated as display:block. The deeper reason behind is that display:inline would make no sense for an absolutely positioned element. Widths, heights, and position of inline-elements depend on the flow and sizes of the surrounding elements. If you rip that element out of the flow, there’s nothing anymore to determine which widths, heights etc its line-box should have.

1 Like
#6

Thank you very much guys! There’s a whole philosophy behind every code element haha