CSS:z-index

来源：互联网发布：美国动画产业知乎编辑：程序博客网时间：2024/06/04 19:42

CSS:z-index

1、用法

z-index:决定了一个HTML元素的层叠顺序。拥有高的层叠顺序的元素总是会处于拥有层叠顺序较低的元素的前面。换句话说，z-index越高，这个元素再层叠顺序中越靠上。

注：z-index属性只能在定位元素中有效（position:absolute | relative |fixed）

2、浏览器兼容性

所有的主流浏览器都支持z-index属性。

3、例：

        * {margin: 0;padding: 0;list-style: none;}.square {width: 400px;height: 200px;margin: 0 auto;position: relative;}.square ul {width: 100%;height: 100%;}.square li {width: 100%;height: 100%;position: absolute;z-index: -1;}.square li:target {z-index: 1;animation: slide 1s;}#square1 {background-color: green;}#square2 {background-color: red;}#square3 {background-color: blue;}.small {position: absolute;right: 0;bottom: 0;z-index: 2;}.small a {text-decoration: none;display: inline-block;padding: 0 6px;color: #fff;background-color: rgba(255,255,255,.5);}@keyframes slide {from {width: 0;}to {width: 400px;}}

        <div class="square">            <ul>                <li id="square1"></li>                <li id="square2"></li>                <li id="square3"></li>            </ul>            <div class="small">                <a href="#square1">1</a>                <a href="#square2">2</a>                <a href="#square3">3</a>            </div>        </div>

1 0