Home/ Questions/Q 8878303
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T19:40:51+00:00

I want my element with class not-absolute to be positioned normally as its siblings

  • 0

I want my element with class “not-absolute” to be positioned normally as its siblings siblings element would be positioned static.Now, since its siblings are positioned absolute, the element not-absolute overlaps with the element positioned absolute.

How do i fix this such that the element would take its normal position all it siblings would be positioned static?

<html>

<head>
    <style type="text/css">
        .world{width:1000px;position:relative;border:1px solid black;height:200px;}
        .world .child{position:absolute}
        .animal{left:0px;}
        .tree{left:200px;}
        .water{left:500px;}

        .not-absolute{position:relative;float:left}
    </style>
</head>
<body>
    <div class='world'>
            <div class='child animal'> Absolute</div>
            <div class='child tree'> Absolute</div>
            <div class='child water'>Absolute</div>
            <div class='not-absolute'>Not Absolute</div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I got it right, I’m afraid, you are asking for impossible. When positioned absolute, elements are removed from the flow, so the normal position of non-absolute element changes also.

    Is it possible to set position:relative currently absolutely positioned elements? That will allow to keep non-absolute element position in a flow.

    You can also try to position your non-absolute element, or leave current .child absolutes with position:static and use their :before/:after pseudo-elements to do the job.

    • 0