前端——通过position定位及z-index实现元素重叠

Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~Biu~biu~biu~

别的话不多说，我们直接切入正题吧~~

再放代码之前我们先来了解一下z-index的一些知识~

使用前提：z-index只能在position属性值为relative或absolute或fixed的元素上有效。

基本原理：z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。

使用的相对性：z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。

所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有**并设置了z-index值的position定位元素。

也因为这个相对性，还会引发浏览器表现不一致出现兼容问题。原因是ie6、7下面position值为非static的元素在未设置z-index值的情况下都会被隐含添加z-index:0，而Firefox/Chrome等现代浏览器会遵循标准默认z-index:auto不会产生值。

还有一点需要注意，负值的z-index也依照大小比较的原理，但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题，请谨慎使用。

下面看一个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
    .pr{position:relative;}
	.pa{position:absolute;}
	div{width:200px;height:200px;border:1px solid #ccc;color:#fff;font:bold 14px \5fae\8f6f\96c5\9ed1;}
	#one{background:#39f;}
	#one .pa1{background:#096;top:25px;left:20px;}
	#one .pa2{background:#969;top:90px;left:40px;}
	#two{background:#669;top:165px;left:70px;}
    </style>
</head>
<body>
       <div class="pr" id="one">
    #one相对定位
    <div class="pa pa1">#one的子元素pa1，相对#one绝对定位，#one是它的父元素，与.pa2为同级兄弟元素</div>
    <div class="pa pa2">#one的子元素pa2，相对#one绝对定位，#one是它的父元素，与.pa1为同级兄弟元素</div>
	</div>
	<div class="pa" id="two">#two绝对定位，与#one为同级元素</div>
    <!--
        注：font: normal 22px/40px \5FAE\8F6F\96C5\9ED1，意思是 字体: normal 不加粗 字体大小22像素 上下40像素居中 相当于line-height:40px;
\5FAE\8F6F\96C5\9ED1应该是unicode编码格式，为了在页面中不显示中文的兼容方法，等价于：\r\nfont-family:\\“微软雅黑” \r\nfont-family:\\“microsoft YaHe”


    -->
    
</body>
</html>

上面的代码设置了两个div：one 和two。其中one又包含两个子div：pa1和pa2.。我们运行代码来看看着四个div是如何排列的。

前端——通过position定位及z-index实现元素重叠

因为上文中的代码没有设置z-index，因此定位后依照元素在文档中的先后位置，后出现的会在上面。

那么现在来试试为#one加上z-index:1;#one .pa1加上z-index:30;#one .pa2加上z-index:20;#two加上z-index:9;看看会有什么结果。

前端——通过position定位及z-index实现元素重叠

可以看到，div的上下重叠顺序发生了改变。

对于z-index来说，父元素的z-index的大小决定了子元素的覆盖优先级。

因为父辈同级元素的z-index值#one<#two，所以#one决定了其子元素.pa1和.pa2的z-index值不论有多大都会被#two所覆盖；作为同级兄弟元素的.pa1和.pa2则比较其z-index值，较大的.pa1显示在上面。

如果想要让两个div重叠，那么借助js和绝对定位，以及z-index，我们就可以实现菜单变换之类的功能。

好啦，这就是如何用position和z-index来实现元素重叠的方法啦~~~

如果大家有什么别的方法，或者发现了文章中的错误，欢迎大家留言评论，我们一起学习呀~~

Biu~biu~biu~

前端——通过position定位及z-index实现元素重叠

相关推荐