css z-index 不起作用

最新推荐文章于 2023-06-27 23:45:17 发布

andyliu

最新推荐文章于 2023-06-27 23:45:17 发布

阅读量1.3k

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/liushuai_andy/article/details/8080081

版权

html+css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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属性。这个原因尚不明确

版本：CSS3
继承性：无

andyliu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css z-index 不起作用

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！不起作用的原因第一个原因：Z-index 仅能在定位元素上奏效#a{width:200px;height:100px;posit
复制链接

扫一扫