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

定位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. BeautifulSoup库children(),descendants()方法的使用

    BeautifulSoup库children(),descendants()方法的使用 示例网站:http://www.pythonscraping.com/pages/page3.html 网站内容 ...

  2. 类似智能购票的demo--进入页面后默认焦点在第一个输入框，输入内容、回车、right时焦点自动跳到下一个，当跳到select时，下拉选项自动弹出，并且可以按上下键选择，选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

  3. 详谈 Unity3D AssetBundle 资源加载,结合实际项目开发实例

    第一次搞资源更新方面,这里只说更新,加载,AssetBundle资源加载,谈谈自己的理解,以及自己在项目中遇到的那些神坑,现在回想一下,真的是自己跪着过来的,说多了,都是泪. 我这边是安卓AssetB ...

  4. pixi.js

    添加基本文件(库文件) 渲染库 pixi.js pixi.lib.js是pixi.js的子集,依赖class.js,cat.js,event_emiter.js文件 pixi.scroller.js ...

  5. 【BFS + Hash】拼图——携程2017春招编程题2

    写在前面 前天参加了携程的网测--还是感觉自己太!渣!了!    _(:з」∠)_ 时光匆匆啊,已经到了开始思考人生的时候了(算了不矫情了)--总之写个博客来督促一下自己.之前太懒了,很多时候都是输在 ...

  6. bzoj3939 【USACO 2015 FEB GOLD 】cow hopscotch

    Description 就像人类喜欢玩"跳房子"的游戏,农民约翰的奶牛已经发明了该游戏的一个变种自己玩.由于笨拙的动物体重近一吨打,牛跳房子几乎总是以灾难告终,但这是没有阻止奶牛几 ...

  7. Eclipse 如何添加Window Builder插件？

    http://www.eclipse.org/windowbuilder/download.php 找到对应版本的window builder 如果不知道版本的话,可以在你的Eclipse-help- ...

  8. 最长公共子序列poj1458

    #include<map> #include<set> #include<list> #include<cmath> #include<queue ...

  9. Docker - 在Ubuntu16.04中安装Docker CE

    Get Docker for Ubuntu Check system version root@Ubuntu16:~# uname -a Linux Ubuntu16 4.8.0-36-generic ...

  10. 《大型网站系统与JAVA中间件实践学习笔记》-1

    第一章:分布式系统介绍 定义:分布式系统是一组分布在网络上通过消息传递进行协作的计算机组成系统. 分布式系统的意义 升级单机处理能力的性价比越来越低 单机处理器能力存在瓶颈 处于稳定性和可用性考虑 阿 ...