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

定位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. java多线程基本概述（一）——线程的基本认知

    1.1.概念: 进程:进程是操作系统结构的基础,是一次程序的执行:是一个程序及其数据再处理器上顺序执行时所发生的活动:是程序再一个数据集合上运行的过程,它是系统进行系统资源分配和调度的最小单元. 线程 ...

  2. 用 parseInt()解决的 小 bug

    在做轮播模块的时候遇到问题是:你在 连续指示小按钮 时候再去 只有 点击 下一张按钮,出现bug: 指示小按钮的 className 当前显示的 calssName 为 undefined ! // ...

  3. Spring Boot启动过程（七）：Connector初始化

    Connector实例的创建已经在Spring Boot启动过程(四):Spring Boot内嵌Tomcat启动中提到了: Connector是LifecycleMBeanBase的子类,先是设置L ...

  4. Java--向数据库添加txt文件中的批量数据

    大家可能会遇到这样的问题,在做一个项目时需要操作数据库,需要有大量的数据需要导入到数据库中,这部分数据存到了txt文档中(可以把Word文档中的数据弄到txt文档),总不能每一条数据都复制黏贴到数据库 ...

  5. 大话PROFINET

    1.PROFINET是什么? PROFINET的全称是Process Field Net,是由PROFIBUS国际组织PI(PROFIBUS International)推的出,在IEC61158标准 ...

  6. 如何有效快速提高Java服务端开发人员的技术水平？

    我相信很多工作了3-5年的开发人员都会经常问自己几个问题: 1.为什么总是感觉技术没有质的提高? 2.如何能够有效和快速的提高自身的技术水平? 3.如何进入到一个牛逼的大公司,认识牛逼的人? 这篇文章 ...

  7. 蓝桥杯-组素数-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  8. unity游戏设计之背包系统

    这次任务是模仿上图的样子,制作一个类似的背包系统. 上面的链接为:http://www.tasharen.com/ngui/exampleX.html 我们的目标是: 1.实现背包系统的UI界面 2. ...

  9. 完全背包hdu1114

    https://vjudge.net/contest/68966#problem/F 初始化就行了:dp[0]=0: 这题还要刚好装满背包,输出时进行判断 #include<map> #i ...

  10. .NET Core 2.0体验

    .NET Core 2.0预览版及.NET Standard 2.0 Preview 这个月也就要发布了. 具体相关信息可以查看之前的文章.NET Core 2.0及.NET Standard 2.0 ...