层级与透明度

最新推荐文章于 2025-05-28 23:17:08 发布

西瓜小羽毛

最新推荐文章于 2025-05-28 23:17:08 发布

阅读量295

点赞数

分类专栏：前端基础文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/weixin_45622395/article/details/107904190

版权

前端基础专栏收录该内容

2 篇文章

订阅专栏

1.开启定位的元素处于同一层级
2.下方元素会默认掩盖上方的元素
3.z-index: n;可以改变层级
4.子元素永远处于父元素上方
5.opacity属性开启透明范围0-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box1
			{
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;
				opacity: 0.5;
			}
			.box2
			{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				top: 100px;
				left: 100px;
				opacity: 0.5;
			}
			.box3
			{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
				position: absolute;
				top: 200px;
				left: 200px;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>