css如何避免绝对定位覆盖其他元素？

html-css011

css如何避免绝对定位覆盖其他元素？,第1张

css避免绝对定位覆盖其他元素，首先，在做定位的时候，确实是会出现覆盖的问题，一般在确定left，top，bottom，right这些数值，一般都是精确的测量过，很少出现覆盖，有问题的，通过JS获取到这个块的left，top，bottom，right,动态的来控制，能避免出现这些问题，具体看代码：

<html>

<head>

<style>

#div1{

width:460px

height:200px

position:absolute

}

</style>

</head>

<script>

var oDiv = document.getElementById('div1')

var Let = Div.style.left //上下的值，

var Rig = Div.style.top

</script>

<body>

<div id='div1'>

<p>我是测试文字</p>

</div>

</body>

</html>

重叠在一起需要改变默认的布局方式，将其中一个显示在上层需要设置深度顺序，这两点分别用如下样式完成

position: absolute /*设置为绝对定位*/

z-index:999        /*设置重叠的上下次序，值越大月在上方*/

示例如下

创建Html元素

<div class="top">

<div class="b">我是绝对定位，并且重叠在上方</div>

<div class="a">我是默认定位</div>

</div>

设置css样式

div.top{margin:50pxpadding:20pxwidth:200pxheight:200pxborder:2px dashed #ebbcbe}

div.top div{width:100pxheight:100pxpadding:10pxcolor:white}

div.a{background:red}

div.b{background:greenposition:absolutetop:100pxleft:100pxz-index:999}

观察显示效果