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. tomcat源码--springboot整合tomcat源码分析

    1.测试代码,一个简单的springboot web项目:地址:https://gitee.com/yangxioahui/demo_mybatis.git 一:tomcat的主要架构:1.如果我们下 ...

  2. 硬核测试：Pulsar 与 Kafka 在金融场景下的性能分析

    背景 Apache Pulsar 是下一代分布式消息流平台,采用计算存储分层架构,具备多租户.高一致.高性能.百万 topic.数据平滑迁移等诸多优势.越来越多的企业正在使用 Pulsar 或者尝试将 ...

  3. 64位系统 system32 和 syswow64

    \Windows\SysWOW64  文件夹下存放32位的库和应用程序 (WOW64 == Windows on Windows 64 bit ) \Windows\System32  文件夹下存放6 ...

  4. C语言中的左移与右移 <<, >> 位运算

    这里参考了一篇很好的位运算,涉及到位运算可能会遇到的正负号问题,左右溢出怎么处理问题. 参考: 1. https://www.cnblogs.com/myblesh/articles/2431806. ...

  5. 设计完美windbg断点

    说到现场调试,断点是最重要的.通常,在生产环境中解决一个非常复杂的问题需要在本地.非生产环境中调试我自己的一台测试机器.我通常会调试有问题的进程或代码,以便更好地了解它是如何工作的,以及在我进入时需要 ...

  6. Solr单机安装

    Solr单机安装 一.下载 自行到官网下载所需版本即可,我这里使用的是solr-7.1.0solr官网:http://archive.apache.org/dist/lucene/solr/ 二.安装 ...

  7. C++11随机数库

    random随机数库 C++11引入了新的随机数生成机制,那就是<random>随机数库,支持多种伪随机数生成算法,多种连续和离散随机数分布算法,以及封装了真正的随机数生成引擎random ...

  8. 为什么说switch比if快

    C++的switch语法 在C++中,switch只接受整型常量作为分支的值: switch (expr) { case integral-constant : \\... break; case i ...

  9. centos8平台redis5日志按天分割

    一,创建日志的备份目录 [root@yjweb crontab]# mkdir /data/logs/redislogsbackup 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https:// ...

  10. ffmpeg实现视频转gif及gif缩放(ffmpeg4.2.2)

    一,为什么选择ffmpeg处理gif? 1,ffmpeg可以从视频中截取gif 2,ffmpeg在缩放gif时出错的机率较低, 而imagemagick在缩放gif时容易出错 我们在后面的例子中可以看 ...