因为定位的出现，所以有了元素重叠的情况，此时就出现了显示谁的情况。在多层布局时，容易出现这种情况

定位position见：http://blog.csdn.net/baidu_37107022/article/details/71642147

1.默认层级规则

但层级规则可以通过z-index来设置

1.在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 200px;

                height: 200px;

                background: red;

                color: #fff;

            }

            .div2{

                width: 150px;

                background: green;

                margin-top: -50px;

            }

            span{

                background: blue;

                color: #fff;

                width: 100px;

                height: 100px;

                display: block;

                margin-top: -50px;

            }

        </style>

    </head>

    <body>

        <!--

            在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高

        -->

        <div>kaivon1</div>

        <div class="div2">kaivon2</div>

        <span>span</span>

    </body>

</html>

效果图

2.有定位元素的层级要比没有定位元素层级要高

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 200px;

                height: 200px;

                background: red;

                color: #fff;

            }

            .div1{

                position: relative;

            }

            .div2{

                width: 150px;

                background: green;

                margin-top: -50px;

            }

            /*span{

                background: blue;

                color: #fff;

                width: 100px;

                height: 100px;

                display: block;

                margin-top: -50px;

            }*/

        </style>

    </head>

    <body>

        <!--

            在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高

            有定位元素的层级要比没有定位元素层级要高

        -->

        <div class="div1">kaivon1</div>

        <div class="div2">kaivon2</div>

        <!--<span>span</span>-->

    </body>

</html>

效果图

2.层级(z-index)

层级由属性z-index来控制：

它的值是一个数字，数字越大层级越高（在同一个层里）

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 200px;

                height: 200px;

                background: red;

                color: #fff;

                position: relative;

            }

            .div1{

                z-index: 2;

            }

            .div2{

                width: 150px;

                background: green;

                margin-top: -50px;

                z-index: 1;

            }

        </style>

    </head>

    <body>

        <!--

            在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高

            有定位元素的层级要比没有定位元素层级要高

            在都有定位的情况下，层级还是取决于书写顺序

            z-index             层级

                它的值是一个数字，数字越大层级越高（在同一个层里）

        -->

        <div class="div1">kaivon1</div>

        <div class="div2">kaivon2</div>

    </body>

</html>

一天搞定CSS：层级(z-index)--18的更多相关文章

  1. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  2. 十分钟搞定CSS选择器

    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...

  3. (转)十分钟搞定CSS选择器

    原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下 ...

  4. 一天搞定CSS（扩展）：CSS Hack

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  5. 一天搞定CSS：定位position--17

    1.定位取值概览 2.相对定位relative <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  6. 一天搞定CSS： 标签样式初始化（CSS reset）及淘宝样式初始化代码--09

    样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...

  7. 一天搞定CSS：盒模型content、padding、border、margin--06

    1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...

  8. 一天搞定CSS：文本text--05

    1.文本体系 2.文本各属性取值 说明: 每一个属性后面的分支是属性值,以及对属性值的说明. 比如text-align- - - -有3个取值:left,center,right 3.空格大小 4.代 ...

  9. 一天搞定CSS：初识css--01

    1)CSS:层叠样式表(英文全称:Cascading Style Sheets) 是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. C ...

随机推荐

  1. 将linux的HOME目录下的文件夹名字改回英文

    为了使用起来方便,装了Ubuntu中文版,自然在home文件里用户目录的“桌面”.“图片”.“视频”.“音乐”……都是中文的.很多时候都喜欢在桌面上放一些要操作的文件,linux里命令行操作又多,难免 ...

  2. loopj.com android-async-http

    loopj.com android-async-http Android异步Http客户端 用于Android的基于回调的Http客户端库   下载版本1.4.9(最新) 或者在github上fork ...

  3. jwt token Example - Python

    0 Pre Install Python3 Install PyCrypto Install PyJWT 1 token 由三部分组成 header, payload, sign 并用逗号连接各部分 ...

  4. kafka环境

    二.环境搭建 参考:http://kafka.apache.org/documentation.html#quickstartStep 1: 下载Kafkawget http://mirrors.no ...

  5. 笔记整理：计算CPU使用率 ----linux 环境编程 从应用到内核

    linux 提供time命令统计进程在用户态和内核态消耗的CPU时间: [root@localhost ~]# time sleep real 0m2.001s user 0m0.001s sys 0 ...

  6. this web application instance has been stopped already.

    this web application instance has been stopped already. Could not load oracle/sql/converter_xcharset ...

  7. Asp.net Authorization 学习

    其实使用新的Identity以来一直有一个疑惑,之前的角色管理 在新的Identity中怎么管理的.[AspNetUserClaims] 在新的授权管理中又占什么位置 第一,根据角色授权,刚刚注册的用 ...

  8. React Starter Kit 中文文档

    最近没事又翻译了个玩意. Github上的一个Star 非常高的 React 样板程序. 由Node.js,Express,GraphQL和React构建,可选加入Redux等,并可以包含Webpac ...

  9. CF IndiaHacks 2016 F Paper task 后缀数组

    题目链接:http://codeforces.com/problemset/problem/653/F 大意是给出一个只包含'('和')'的括号串,求有多少不同的子串是合法的括号串 解法:对于每一个后 ...

  10. 简谈-如何使用Python和R组合完成任务

    概述 和那些数据科学比赛不同,在真实的数据科学中,我们可能更多的时间不是在做算法的开发,而是对需求的定义和数据的治理.所以,如何更好的结合现实业务,让数据真正产生价值成了一个更有意义的话题. 数据科学 ...