How to insert DIV element at the top of the page and slide down other elements that have absolute top:0 css styles

Question

I have web site with very complicated elements structure and CSS styles where many elements have position:absolute and top:0 styles applied.

There are many divs one inside others and so on (I inherited this web from former owner)

Is it somehow possible to insert div element in top of the page and slide down all other elements without need for changing others CSS styles? Some kind of inserting header with some text that would "override" other styles...

Answer 1

You can use a little bit of javascript to get the height of the element you want to be at the top, and then move the others down based on that height, like so

 $(function() { var item = $(".item"); var itemHeight = item.outerHeight(); $(".middle").css({ "top": itemHeight + "px" }); $(".bottom").css({ "top": itemHeight * 2 + "px" }); });

 body { margin: 0; } main { height: 100vh; min-height: 500px; width: 100%; background: DarkOrchid; }.top, .middle, .bottom { height: 100px; width: 85%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; color: #fff; font-family: sans-serif; }.top { background: goldenrod; }.middle { background: royalblue; }.bottom { background: tomato; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main> <div class="top item">this is the top one</div> <div class="middle item">this is the middle</div> <div class="bottom item">this is the bottom one</div> </main>