z-index层叠

最新推荐文章于 2022-04-10 10:20:16 发布

菲菲会灰

最新推荐文章于 2022-04-10 10:20:16 发布

阅读量265

点赞数

分类专栏：笔记文章标签：层叠z-index

本文链接：https://blog.youkuaiyun.com/weixin_43734012/article/details/84578643

版权

笔记专栏收录该内容

2 篇文章

订阅专栏

如果定位元素的层级一样，下面得元素会覆盖住上面的元素
可以使用z-index设置定位元素
一个元素可以有正数或负数得堆叠顺序，数字越大，层级越高
对于没有使用定位的元素不能使用z-index属性*/
opacity: 0.5;
opacity:可以设置元素背景的透明度
它的值只能是在0-1之间
0：代表完全透明
1：代表完全不透明
0.5：代表半透明

			 IE8及一下浏览器不支持opacity
			 IE8以及更早的版本支持替代的filter属性
			 例如：filter:Alpha(opacity=透明度)。
			 透明度值在0-100之间
			 0：完全透明
			 50：半透明
			 100：不透明

父元素的层级再高，也盖不住子元素
小例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>z-index</title>
		<style>
			.c1{
				width: 200px;
				height: 200px;
				background-color: #0000FF;
				position: relative;
				z-index: 999;
				
				opacity: 0.5;
			
				filter: Alpha(opacity=50);
			}
			.c2{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 100px;
				top: 100px;
				z-index: 99;
				opacity: 0.5;
			}
			.c3{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
				position: absolute;
				left: 200px;
				top: 200px;
				z-index: 9;
				opacity: 0.5;
			}
			.c4{
				width: 200px;
				height: 200px;
				background-color: #518700;
				/*相对定位*/
				position: relative;
				top: 400px;
				z-index: 9999;
				
			}
			.c5{
				width: 100px;
				height: 100px;
				background-color: #800080;
				position: relative;
				z-index: 99;
			}
		</style>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
		<div class="c4">
			<div class="c5"></div>
		</div>
	</body>
</html>