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. IP基础知识

    请根据IP地址 和 子网掩码,计算出 网络地址.广播地址 IP地址分类 对3类主要IP地址的补充说明: 

  2. Linux驱动知识点

    # i2c_add_driver和i2c_new_device匹配后调用i2c_probe # 启动开发板,在超级终端中输入命令"cat /proc/misc"也可以查看对应的杂项 ...

  3. Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例

    本文实例讲述了Python数据结构与算法之图的最短路径(Dijkstra算法).分享给大家供大家参考,具体如下: # coding:utf-8 # Dijkstra算法--通过边实现松弛 # 指定一个 ...

  4. JS/TS 对数组中的对象按对象的值进行去重

    举个例子:对以下数组按 lastName 的值进行去重 let listData = [ { firstName: "Rick", lastName: "Sanchez& ...

  5. randomatic

    下载 randomaticrandomatic 使用简单的字符序列生成指定长度的随机字符串.原generate-password. 请考虑下面这个项目的作者,Jon Schlinkert主演的,考虑项 ...

  6. 【3】Java面试-Servlet

    Servlet面试问题 Q1.什么是servlet? Java Servlet是服务器端技术,通过提供对动态响应和数据持久性的支持来扩展Web服务器的功能. javax.servlet和javax.s ...

  7. Scala小记（一）

    Scala小记----初识Scala 一,什么是Scale? Scala是一门面向对象的,使用JVM运行的函数式编程语言,(函数式编程语言:指的就是那些将方法或者说是函数来作为参数 进行传递的编程语言 ...

  8. xxe 新手学习记录

    在做某题时遇到了xxe漏洞,学习+记录 这里因为环境暂时关了,现在复现不了,所以在网络上又找到了一些xxe题目环境 这里有 PikaChu靶场里的xxe环境,这个环境可以在BUUCTF里开,但是这里我 ...

  9. (OK) Android内核（4.9）集成最新版MPTCP---成功

    Android内核(4.9)集成最新版MPTCP---成功

  10. 多测师讲解接口自动化测试 _requests_高级讲师肖sir

    rep=requests.post 错误方法: 1.在代理中---把高级中----代理-----去除勾选,调用失败