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. Oracle 11gR2-Win 64bit

    版本:Oracle 11gR2下载地址:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.ht ...

  2. Python练习题 037：Project Euler 009：毕达哥拉斯三元组之乘积

    本题来自 Project Euler 第9题:https://projecteuler.net/problem=9 # Project Euler: Problem 9: Special Pythag ...

  3. makefile实验二 对目标的深入理解 以及rebuild build clean的实现

    (一) rebuild build clean的实现 新知识点: 当一个目标的依赖是一个伪目标时,这个伪目标的规则一定会被执行. 贴实验代码 CC := gcc Target := helloworl ...

  4. P3545 [POI2012]HUR-Warehouse Store

    题目描述 n天.第i天上午会进货Ai件商品,中午的时候会有顾客需要购买Bi件商品,可以选择满足顾客的要求,或是无视掉他. 如果要满足顾客的需求,就必须要有足够的库存.问最多能够满足多少个顾客的需求. ...

  5. Hive理论基础

    数仓特征:面向主题,集成,非易失的,时变.数据仓库是在数据库已经大量存在的情况下,为了进一步挖掘数据资源.为了决策需要而产生的,不是所谓的"大型数据库".   数据库与数据仓库的区 ...

  6. PropertySheet外壳扩展AppWizard

    下载source files - 39 Kb 下载Wizard - 17 Kb 本文旨在简化属性表外壳扩展的实现.它紧接我的第一篇文章 处理上下文菜单壳扩展和灵感 由Michael Dunn最优秀的系 ...

  7. linux 内存泄露检测工具

    Valgrind Memcheck 一个强大开源的程序检测工具 下载地址:http://valgrind.org/downloads/current.html Valgrind快速入门指南:http: ...

  8. win10 home安装docker快速攻略

    本文适用于win10 Home用户,专业版和企业版直接见官网.win7版本见Docker Toolbox. 安装清单 软件 说明 Docker Desktop Installer 步骤介绍页:http ...

  9. linunx常用命令综合

    # linux常用命令exsi 6.5虚拟化系统命令大全 https://www.runoob.com/linux/linux-command-manual.html# sudo -i 设置切换无密码 ...

  10. 使用 volatile 关键字保证变量可见性和禁止指令重排序

    volatile 概述 volatile 是 Java 提供的一种轻量级的同步机制.相比于传统的 synchronize,虽然 volatile 能实现的同步性要差一些,但开销更低,因为它不会引起频繁 ...