定位流之 z-index 属性

最新推荐文章于 2021-02-07 21:23:32 发布

407指导员

最新推荐文章于 2021-02-07 21:23:32 发布

阅读量560

点赞数

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109816841

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

z-index 属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

默认情况下所有的元素都有一个默认的z-index属性，值为0

Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

元素可拥有负的 z-index 属性值。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

覆盖关系

1.默认情况下定位流的元素会覆盖住标准流的元素

2.默认情况下后边编写的会盖住前边编写的元素

3.如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: red;
            position: relative;
            left: 0;
            top: 0;
        }

        .box2 {
            background-color: yellow;
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .box3 {
            background-color: blue;
            position: fixed;
            left: 100px;
            top: 100px ;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

在这里插入图片描述 box2中加入

z-index: 1;

在这里插入图片描述

可能的值

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

注意点

1从父现象

如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大就显示在上边。

如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就就会显示在上边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father1 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            z-index: 2;
        }

        .father2 {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            z-index: 1;
        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 200px;
            top: 200px;
            z-index: 4;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 250px;
            top: 50px;
            z-index: 6;
        }


    </style>
</head>
<body>
<div class=father1>
    <div class="son1"></div>
</div>
<div class="father2">
    <div class="son2"></div>
</div>

</body>
</html>

在这里插入图片描述

407指导员

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
定位流之 z-index 属性

z-index 属性z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。默认情况下所有的元素都有一个默认的z-index属性，值为0Z-index 仅能在定位元素上奏效（例如 position:absolute;）！元素可拥有负的 z-index 属性值。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。任何的版本的 Internet Explorer （包括 IE8）都不支
复制链接

扫一扫

专栏目录