如何在頁面頂部插入DIV元素並向下滑動具有絕對頂部的其他元素：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.

其他里面有很多 div 等等（我從前所有者那里繼承了這個 web）

是否可以在頁面頂部插入 div 元素並向下滑動所有其他元素而無需更改其他元素 CSS styles？ 某種插入 header 的一些文本會“覆蓋”其他 styles...

Answer 1

您可以使用一點 javascript 來獲取您想要位於頂部的元素的高度，然后根據該高度將其他元素向下移動，就像這樣

 $(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>