[英]How to insert DIV element at the top of the page and slide down other elements that have absolute top:0 css styles
I have web site with very complicated elements structure and CSS styles where many elements have position:absolute
and top:0
styles applied. 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)其他里面有很多 div 等等(我从前所有者那里继承了这个 web)
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?是否可以在页面顶部插入 div 元素并向下滑动所有其他元素而无需更改其他元素 CSS styles? Some kind of inserting header with some text that would "override" other styles...某种插入 header 的一些文本会“覆盖”其他 styles...
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您可以使用一点 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.