Css中z-index层的叠加使用

最新推荐文章于 2022-03-31 14:55:32 发布

yb305小白

最新推荐文章于 2022-03-31 14:55:32 发布

阅读量354

点赞数

分类专栏： css 文章标签： Css z-index

本文链接：https://blog.csdn.net/yb305/article/details/106613914

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.z-index只有在div是 position: absolute;绝对定位的条件下才能使用。

<html>
<head>
<style type="text/css">

.div1
{
  position:absolute;
  left:0px;
  top:0px;
  z-index:1;
  background:green;
  height:70px;
  width:300px;
}
.div2
{
  position:absolute;
  left:20px;
  top:20px;
  z-index:2;
  background:yellow;
  height:70px;
  width:100px;
}

.div3
{
    position:absolute;
	z-index:3;
    left:40px;
	top:40px;
    font-weight:bold;
    background:red;
}
</style>
</head>

<body>
<div class="div1">第一层</div>
<div class="div2">第二层</div>
<div class="div3">第三层</div>
</body>
</html>