z-index的理解

原创已于 2022-03-04 18:30:27 修改 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #javascript

于 2021-09-06 17:00:50 首次发布

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了z-index属性在定位元素（relative/absolute/fixed/sticky）中的作用，通过实例说明了不同层级元素的叠加原理，以及如何调整z-index值来实现视觉层级的控制。

z-index的理解

只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用

<style>
	.main{
	position: relative;
	width: 500px;
	height: 500px;
	}
	.son{
	position: absolute;
	width: 200px;
	height:200px;
	z-index: 10;
	background: red;
	top: 0;
	left: 0;
	}
	.sondiv{
	background: #1f2d3d;
	width: 100px;
	height: 100px;
	position: relative;
	top: 10px;
	left: 10px
	}
	.son1{
	position: absolute;
	width: 200px;
	height:200px;
	z-index: 8;
	background: #9e9595;
	top: 30px;
	left: 30px;
	}
	.son1div{
	background: #1175e8;
	width: 100px;
	height: 100px;
	position: relative;
	top: 10px;
	left: 10px
	}
</style>
<div class="main">
        <div class="son">SON
            <div class="sondiv">sondiv
            </div>
        </div>
        <div class="son1">son1
            <div class="son1div">son1div
            </div>
        </div>
    </div>

在这里插入图片描述

<style>
	.main{
	position: relative;
	width: 500px;
	height: 500px
	}
	.son{
	position: absolute;
	width: 200px;
	height:200px;
	z-index: 7;
	background: red;
	top: 0;
	left: 0;
	}
	.sondiv{
	background: #1f2d3d;
	width: 100px;
	height: 100px;
	position: relative;
	top: 10px;
	left: 10px
	}
	.son1{
	position: absolute;
	width: 200px;
	height:200px;
	z-index: 8;
	background: #9e9595;
	top: 30px;
	left: 30px;
	}
	.son1div{
	background: #1175e8;
	width: 100px;
	height: 100px;
	position: relative;
	top: 10px;
	left: 10px
	}
</style>
<div class="main">
       <div class="son">SON
            <div class="sondiv">sondiv
            </div>
        </div>
        <div class="son1">son1
            <div class="son1div">son1div
            </div>
        </div>
    </div>

在这里插入图片描述

<style>
	.main{
	position: relative;
	width: 500px;
	height: 500px
	}
	.son{
	position: absolute;
	width: 200px;
	height:200px;
	z-index: 7;
	background: red;
	top: 0;
	left: 0;
	}
	.sondiv{
	background: #1f2d3d;
	width: 100px;
	height: 100px;
	position: relative;
	top: 10px;
	left: 10px;
	z-index: 100000
	}
	.son1{
	position: absolute;
	width: 200px;
	height:200px;
	z-index: 8;
	background: #9e9595;
	top: 30px;
	left: 30px;
	}
	.son1div{
	background: #1175e8;
	width: 100px;
	height: 100px;
	position: relative;
	top: 10px;
	left: 10px;
	z-index: 10;
	}
</style>
<div class="main">
        <div class="son">SON
            <div class="sondiv">sondiv
            </div>
        </div>
        <div class="son1">son1
            <div class="son1div">son1div
            </div>
        </div>
    </div>

在这里插入图片描述

<style>
	.main{
	position: relative;width: 500px;height: 500px
	}
	.son{
	position: absolute;width: 200px;height:200px;z-index: auto;background: red;top: 0;left: 0;
	}
	.sondiv{
	background: #1f2d3d;width: 100px;height: 100px;position: relative;top: 10px;left: 10px;z-index: 100000
	}
	.son1{
	position: absolute;width: 200px;height:200px;z-index: 8;background: #9e9595;top: 30px;left: 30px;
	}
	.son1div{
	background: #1175e8;width: 100px;height: 100px;position: relative;top: 10px;left: 10px;z-index: 10;
	}
</style>
 <div class="main">
    <div class="son">SON
            <div class="sondiv">sondiv
            </div>
        </div>
        <div class="son1">son1
            <div class="son1div">son1div
            </div>
        </div>
    </div>