1.固定定位是脱离标准流的，不会占用标准流的空间
    2.和绝对定位有点像，也不区分行内块级元素
    3.类似于前面学的背景关联方式（让某个背景图片不随滚动而滚动）让某个元素不随着滚动条的滚动而滚动
    ie6不支持固定定位

定义：默认情况所以元素的z-index属性是0;
作用是专门用于控制定位流元素的覆盖关系的
默认情况下定位流的元素会盖住标准流的元素
后面编写的定位流会盖住前面编写的定位流元素
在企业开发中：可能不止一次用了定位流，而根据定位流的性质，很有可能后面的元素会盖住前面的元素从而影响整个布局，为了解决这个问题，引入了z-index属性，元素z-index属性大的会覆盖属性小的元素
从父原则：当子元素的父元素有z-index属性时，比较会看父元素的属性而子元素设置的属性就无效了
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定位流中的z-index属性</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        div{

            width: 100px;

            height: 100px;

        }

        .box1{

            background-color: yellow;

            position: relative;

            top: 50px;

            left: 50px;

            z-index: 3;

        }

        .box2{

            background-color: red;

            position: absolute;

            top: 100px;

            left: 100px;

            z-index: 1;

        }

        .box3{

            background-color: green;

            position: fixed;

            top: 150px;

            left: 150px;

            z-index: 2;

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

</html>

定位流之z-index属性的更多相关文章

  1. Elasticsearch学习之图解Elasticsearch中的_source、_all、store和index属性

    转自 : https://blog.csdn.net/napoay/article/details/62233031 1. 概述 Elasticsearch中有几个关键属性容易混淆,很多人搞不清楚_s ...

  2. 2.33 定位的坑：class属性有空格

    2.33 定位的坑:class属性有空格 前言有些class属性中间有空格,如果直接复制过来定位是会报错的InvalidSelectorException: Message:The given sel ...

  3. 标准I/O库之定位流

    有三种方法定位标准I/O流. (1)ftell和fseek函数.这两个函数自V7以来就存在了,但是它们都假定文件的位置可以存放在一个长整型中. (2)ftello和fseeko函数.Single UN ...

  4. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  5. CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

    在CSS中关于定位的内容是:position:relative | absolute | static | fixed • static 自动定位,自动定位就是元素在页 面普通文档流中由HTML自动定 ...

  6. （一）javascript中的数组index属性——获取数组的索引值

    例如:要做到这样的效果 点击每个选项时,会显示不同的div. 我们的做法:在javascript中,先把所有的div的display设置为none,然后在根据当前的数组里的索引值进行一个显示div的过 ...

  7. DOM2定位与高宽类属性专题学习【DOM专题学习系列（一）】

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  8. 使用jstl的Foreach 和jquery的each()的index属性

    最近项目中用到隔行换色问题,使用到了jstl的foreach和jquery的each进行遍历. 首先jstl技术.除了常用的items,var外,还有一个下标属性varStatus,从0开始,使用起来 ...

  9. Pandas的index属性

    我们在统计数据的长度或者个数,不用统计去专门获取数值,而是用index这个数据获取即可,DataFrame的index直接就是最前面的索引号,如果要统计列的个数,使用DataFrame.colums获 ...

随机推荐

  1. python实现随机复制若干个文件到新目录

    python实现随机复制若干个文件到新目录 1说明 1.1 目的 随机选择一个文件下的若干个文件,并将文件复制到新文件夹下 1.2 要求 需要将random_select_and_copy_file. ...

  2. java基础篇1

    JAVA基础篇1 注释 单行注释 //这是一个单行注释,由两个斜杠组成,不能嵌套多行注释 多行注释 /*这是一个 多行注释 ,//里面不能嵌套多行注释, 但是可以嵌套单行注释*/ 文档注释 /**ja ...

  3. Linux Wait Queue 等待队列

    一.引言 linux 内核的等待队列和进程调度息息相关,进程在某些情况下必须等待某些事件的发生,例如:等待一个磁盘操作的终止,等待释放系统资源,或等待指定的时间间隔. 等待队列实现了在事件上的条件等待 ...

  4. Ribbon源码分析（二）-- 服务列表的获取和负载均衡算法分析

    上一篇博客(https://www.cnblogs.com/yangxiaohui227/p/12614343.html)分享了ribbon如何实现对http://product/info/这个链接重 ...

  5. Python 3 入门，看这篇就够了（超全整理）

    史上最全Python资料汇总(长期更新).隔壁小孩都馋哭了 --- 点击领取 今天和大家分享的内容是Python入门干货,文章很长. 简介 Python 是一种高层次的结合了解释性.编译性.互动性和面 ...

  6. Git多人项目开发流程演练

    1. 前言 本文利用 GitHub 平台进行一个多人项目开发流程的演练,以加深课上所学内容. 参考文献:五⼤场景玩转 Git,只要这一篇就够了! 2. 初始化项目 2.1 新建远程项目 一个多人项目通 ...

  7. Spring中用@DependsOn注解控制Bean的创建顺序

    1. 概述 Spirng容器自己会管理bean的生命周期和bean实例化的顺序,但是我们仍然可以根据我们自己的需求进行定制.我可以可以选择使用SmartLifeCycle接口,也可以用@Depends ...

  8. linux 漏洞列表

    #CVE #Description #Kernels CVE-2017-1000367 [Sudo](Sudo 1.8.6p7 - 1.8.20) CVE-2017-7494 [Samba Remot ...

  9. ==38254==Sanitizer CHECK failed报错解决

    跑代码时发现有如下报错: LeakSanitizer: bad pointer 0x7ffd00735130==38254==Sanitizer CHECK failed: ../../../../l ...

  10. JavaScript判断字符串中出现次数最多的字符，并统计其次数

    要求: 输出一个给定字符串``中出现次数最多的字符,并统计其次数. 实现思路: 利用charA()遍历这个字符串 把每个字符都存储给对象,如果对象没有该属性,就先幅值为1,如果存在了就+1 遍历对象, ...