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. 正则表达式（代码java版）

    目录 元字符 检测工具 普通字符 字符类 预定义字符类 数量词 默认数量词 自定义量词 预定义量词 边界标识符 正则组 简单应用 复杂组序 捕获组 看了好些天的正则表达式,终于有时间来写一篇关于它的博 ...

  2. SpringMVC参数返回给页面

    springMVC将后台参数返回给前台页面 方法一:利用ModelAndView返回值 1 @RequestMapping("/returnPage.do") 2 public M ...

  3. Python-类属性查询协议-__getattr__ __getattribute__

    __getattr__ 查找不到类属性的时候调用 class BeiMenChuiXue: def __init__(self, name): self.name = name def __getat ...

  4. sqli-labs第一关 详解

    sqli-labs第一关 方法一:手工注入 方法二:sqlmap工具 两种方式,都可以学学,顺便学会用sqlmap,也是不错的.不多说,我们开始吧 方法一: 来到第一关,图上说我们需要一个数字的参数 ...

  5. 00 你的第一个C语言程序

    C语言简介 C 语言是一种通用的.面向过程式的计算机程序设计语言,即编程语言. 为移植和开发 UNIX 操作系统,丹尼斯·里奇于1972年在贝尔电话实验室设计开发了 C 语言的第一个版本. C 语言同 ...

  6. Visual Studio中Debug与Release以及x86、x64、Any CPU的区别 &&&& VS中Debug与Release、_WIN32与_WIN64的区别

    本以为这些无关紧要的 Debug与Release以及x86.x64.Any CPU 差点搞死人了. 看了以下博文才后怕,难怪我切换了一下模式,程序就pass了.... 转载: 1.https://ww ...

  7. I2C总线的Arduino库函数

    I2C总线的Arduino库函数 I2C即Inter-Integrated Circuit串行总线的缩写,是PHILIPS公司推出的芯片间串行传输总线.它以1根串行数据线(SDA)和1根串行时钟线(S ...

  8. P3419 [POI2005]SAM-Toy Cars / SP688 SAM - Toy Cars

    一道很妙的贪心题 题面 我们考虑当我们插入时会面临的两种情况 当地上的玩具,不满 \(k\) 个时,那我们直接放就可以了. 当满了 \(k\) 个的时候,我们就要从地上拿出一个来给当前的腾位置. 这就 ...

  9. Spring Boot第七弹，别再问我拦截器如何配置了！！！

    持续原创输出,点击上方蓝字关注我吧 前言 上篇文章讲了Spring Boot的WEB开发基础内容,相信读者朋友们已经有了初步的了解,知道如何写一个接口. 今天这篇文章来介绍一下拦截器在Spring B ...

  10. C# 用IrisSkin4.dll美化你的WinForm

    如果需要查看更多文章,请微信搜索公众号 csharp编程大全,需要进C#交流群群请加微信z438679770,备注进群, 我邀请你进群! ! ! --------------------------- ...