Please help me understand position: absolute properly

[aileajho]

Hello, I can’t understand certain things about “position: absolute” in css. Most of the time, things work as I expect, but there must be a certain concept I don’t know about and it’s really making me frustrated. I’d really appreciate if somebody can pinpoint it for me.

Here is my example code. With “position: relative” boxes get positioned as expected. Now, the change is needed to make the greenish transparent box with Hello text above the picture. So, ‘absolute’ is needed. However, the next box ‘ouch’ (in blue) somehow inherits the absolute(?!) in a very weird way! What is needed in this code to make the ‘ouch’ box continue below the picture (as in relative).

https://www.w3schools.com/code/tryit.asp?filename=G39TDN7D3KMV

[aileajho]

Sorry, I was talking about the blue Blahblah box when I said “ouch”. The blue Blahblah box needs to continue relative and I don’t know why it doesn’t?
The blue box needs to be beneath everything, as everything before it is a header.

[Shikkediel]

If you go over the elements in developer tools, you will see that .hrowx has no height because absolutely positioned elements are taken out of the document flow. This is why the items that follow start at the top of the page. Removing absolute from .top will make the blue box start beneath the image/header.

[Author]

Posts