Question 226221 in Html Question posted in
Some basic documentation can be found here.

Html – Why does the last absolutely positioned element misbehave?

I have a parent element that is absolutely positioned, and three children.

enter image description here

When I make the first child to be positioned absolutely, the second child moves up and behind the first. This is expected.

enter image description here

When I make the first and second child to be positioned absolutely, the third child moves up and behind the first and second children. This is expected.

enter image description here

But when I make all the children to be positioned absolutely, the children move out of the parent completely. Why and how to rectify this?

enter image description here

Here’s the code:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        .parent {
            position: absolute;
            top: 30px;
            right: 30px;
            border: 1px solid blue;
        }

        .child.line1 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: red;
        }

        .child.line2 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: lightblue;
        }

        .child.line3 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div style="height: 100%; display: flex; align-items: center; justify-content: center;">
        <div style="position: fixed; height: 200px; width: 200px; background-color: bisque;">
            <div class="parent">
                <div class="child line1"></div>
                <div class="child line2"></div>
                <div class="child line3"></div>
            </div>
        </div>
    </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    No, children are inside parent element even when they all have position absolute.

    Problem is with your parent element.

    .parent {
  position: absolute;
  top: 30px;
  right: 30px;
  border: 1px solid blue;
}

    You didn’t set width and height of parent element, so when you set all children to absolute position, parent element’s with and height is 0.

    Litlle blue square which is "outside" of the parent is just parent’s border.

    If you add width: 10px;, height: 10px; and box-sizing: content-box; to the .parent everything would look like you expected.

    Here is codepan: https://codepen.io/milanh212/pen/YzRbWQz

    P.S. You should always set top/bottom and left/right to absolute/fixed positioned elements to be sure that they will be where you want them always in every browser and any device.

    In your case, you should add:

    .child {
  top: 0;
  left: 0;
}
    Login or Signup to reply.
  2. 0

    First, you have to set the height and width of the parent to the size of the box, and the inner box should be dimensioned from the top, then it will come in line after line.

    The code is written below, please check it. Hope it will work for you.

            * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        .parent {
            position: absolute;
            top: 30px;
            right: 30px;
            border: 1px solid blue; 
            /* First you need to add height & width in your parent div */
            height: 32px; /* add height 30px + 1px (border-top) + 1px (border-bottom) */
            width: 12px; /* add width 10px + 1px (border-left) + 1px (border-right) */

        }

        .child.line1 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: red;
            top: 0px; /* mention top side */
        }

        .child.line2 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: lightblue;
            top: 10px; /* To move 10px down from the top side */
        }

        .child.line3 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: green;
            top: 20px; /* To move 20px down from the top side */
        }
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="height: 100%; display: flex; align-items: center; justify-content: center;">
        <div style="position: fixed; height: 200px; width: 200px; background-color: bisque;">
            <div class="parent">
                <div class="child line1"></div>
                <div class="child line2"></div>
                <div class="child line3"></div>
            </div>
        </div>
    </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search