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

定位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多线程基本概述（二）——Thread的一些方法

    在Thread类中有很多方法值得我们关注一下.下面选取几个进行范例: 1.1.isAlive()方法 java api 描述如下: public final boolean isAlive() Tes ...

  2. 读《effective C++》1

    条款一:视C++为一个语言联邦 学习C++半个月了,学了他的面向过程编程,面向对象编程(封装性,继承性,多态性),template泛型编程,开始只是觉得C++基础是面向对象,但是学了这么多块开始有点迷 ...

  3. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...

  4. HDU 2846 Trie查询

    给出若干模式串,再给出若干询问串,求每个询问串作为多少个模式串的子串出现. 如果一个串是另一个串的子串,则一定是另一个串某个前缀的后缀或者某个后缀的前缀.根据字典树的性质,将模式串的每一个后缀插入字典 ...

  5. iOS·UIKit & Foundation框架—Annotations & Category注解工具类

  6. typedef和define的详细区别

    typedef是一种在计算机编程语言中用来声明自定义数据类型,配合各种原有数据类型来达到简化编程的目的的类型定义关键字. #define是预处理指令.下面让我们一起来看. typedef是C语言语句, ...

  7. jQuery修炼心得-DOM节点的删除

    要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题. 1.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. ...

  8. Pangolin学习

    0.1. 资料 0.2. 使用说明 0.3. HelloPangolin 0.4. Plot data with ros 0.1. 资料 泡泡机器人 github example opengl中摄像机 ...

  9. .net 程序集

    前言:用了几天的时间把高级编程里面程序集一章看完了,原来自己只知道写代码,右键添加引用,从来也不知道操作的实质是什么,微软总是这个套路,鼠标点点就能把任务完成,这对新手友好但是对要通透了解程序执行和内 ...

  10. Oracle的正则应用之匹配出手机号

    按照要求匹配出符合中国大陆手机号规则的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into te ...