Please help me understand position: absolute properly

HTML-CSS
1

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 ‘Blahblah’ (in blue) somehow inherits the absolute(?!) in a very weird way! What is needed in this code to make the ‘Blahblah’ box continue below the picture (as in relative).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        *,
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .tops {
            position: relative;
            width: 350px;
            height: 100px;
            background-color: blue;
            z-index: 200;
        }

        .onebelow {
            width: 350px;
            background-color: aqua;
        }

        .ouch {
            position: absolute;
            margin-top: 50px;
            /*margin-top: 407px;*/
            width: 254px;
            height: 189px;
            background: rgb(14, 72, 80);
            background: rgba(14, 72, 80, 0.5);

            color: white;
            font-size: 42px;

            padding-left: 163px;
            padding-top: 29px;
            line-height: 125px;
            z-index: 10;

        }

        .top {
            position: absolute;
            z-index: 2;
            width: 100%;
            border: 2px solid red;
        }
        .selse,
        .hrowx{
            position: relative;
        }
    </style>
</head>


<body>
    <header>
        <div class="hrowx">
            <div class="top">
                <img id="my_image" src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBKHUZJ.img?h=416&w=799&m=6&q=60&u=t&o=f&l=f&x=1700&y=1854" />
            </div>
            <div class="ouch">
                Hello!
                <div class="nothing">
                    <p><sup>2</sup></p>
                </div>
            </div>

        </div>

    </header>


    <section>
        <div class="selse">
            <div class="tops">
                Blahblah

            </div>
        </div>
    </section>
</body>

</html>
2

Will be helpful if you add a link to your demo. You can add part of your link since you can’t add full links yet.

3

Just trying to help:

  • Static - this is the default value, all elements are in order as they appear in the document.
  • Relative - the element is positioned relative to its normal position.
  • Absolute - the element is positioned absolutely to its first positioned parent.
  • Fixed - the element is positioned related to the browser window.
  • Sticky - the element is positioned based on the user’s scroll position.
4

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

5

The problem is: the absolute element does get “positioned to its first positioned parent”, but there doesn’t seem to be the way to break this rule for the very next element, outside the parent.

6

You’re referring to the fact that the section (blue box) is not below the image?

The header contains a div which contains two absolutely positioned elements. This effectively collapses both of them (header and div) making their height 0. If you give the header a height of say 430px; you can see that now the section is below the image.

I should also note that you are not actually using positioning on the absolutely positioned elements, for that you want to use the top/left/right/bottom properties.

e.g. centering an absolute positioned element inside a relatively positioned container.

.centered {
  display: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

I can’t really tell what your desired layout is from looking at the code so it’s a little difficult to give you any code solution.

7

Thank you for answering. Yes, my desired layout is to have the blue box below the image.
Also, I cannot set the height to anything as I want everything to be able to resize to viewport. The picture needs to have width: 100%;

I want to have a picture for the header, and about 3-4 divs that go over the picture (thus, absolute). The rest of the content is body, and it’s in a blue box and should be below (width also should be set to 100%). I cannot use background-image for the picture, for other reasons.

Sorry if I wasn’t cleat enough before, I’ve spent the whole night trying to figure out the issue.

8

Is there a reason why the image is inside an absolutely positioned container? If you move the image so it is a child of .hrowx it will give the containers a height.

It sounds like you want something like a hero image with some overlaying boxes? If not, can you show an example or image of what it is you want?

Super quick pen, might not be exactly what you want.
https://codepen.io/anon/pen/JVZwbN

9

You have no idea how much you have helped me! Thank you so much!
The thing that actually made me headaches is not using top, bottom, left, right for absolute(ly) positioned elements. I used margins and paddings and that completely destroyed everything and made me question my whole understanding of the positioning. Add that to hours of trying to fix the issue and madness starts. Now everything makes sense, plus, I’ve learned some more useful tricks from your code. Thank you so much!