css z-index 不起作用

最新推荐文章于 2024-05-31 19:50:46 发布

p是马甲

最新推荐文章于 2024-05-31 19:50:46 发布

阅读量123

点赞数

原文链接：http://www.cnblogs.com/andyliu007/archive/2012/10/17/2795390.html

版权

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

不起作用的原因第一个原因：Z-index 仅能在定位元素上奏效

<style type="text/css">
#a{width:200px;height:100px;position:relative; background-color:red;z-index:100}
#b{width:300px;height:200px;background-color:blue;position:absolute;top:10px;left:10px;z-index:1}
</style>


<div id="a">
    <div id="b"></div>
</div>

不起作用的第二个原因：这里的子集是相对父级的定位，在父级里面的子集可以通过z-index来表明层次，但是相对于父级，子集的层次是要低一些的。

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> 
	<style>
		.out {
			width:100px;
			height:200px;
			background:red;
			-webkit-transform:scale(2);
		}
		#name {
			position:absolute;
			width:30px;
			height:30px;
			z-index:30;
			background:yellow;
		}
		.in {
			position:absolute;
			top:20px;
			left:30px;
			width:100px;
			height:200px;
			background:blue;
			z-index:10;
		}
	</style>
</head>
<body id="body">
	<div class="out"><div id="name">
		
	</div></div>
	<div class="in"></div>
</body>

不起作用低三个原因 #name的父元素使用了 transform属性。这个原因尚不明确