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

定位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. JSSDK微信自定义分享

    背景:15年之前的微信分享只需要加入一段js就可以实现.后来微信官方全部禁止了.现在的微信分享全部得使用jssdk. 一.分享功能: 在微信内(必须在微信里)打开网站页面,分享给朋友或者分享到朋友圈时 ...

  2. Java多线程学习笔记（一）——Thread类中方法介绍

    currentThread():返回代码正在被哪个线程调用. public class CurrentThreadWay { public static void main(String[] args ...

  3. Java 原始数据类型

    如何记住 Java 中的原始数据类型? 画了一个图方便记忆:

  4. angular中路由的实现（针对新手）

    最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...

  5. lua 数据类型

    lua 数据类型 8 种数据类型 类型 说明 nil 空类型 boolean 布尔类型 number 数值型, 浮点型 string 字符串 function 函数 userdata 用户自定义结构 ...

  6. Jmeter察看结果树的响应数据中的中文显示乱码问题处理

    1.Jmeter的察看结果树的响应数据有中文时会显示乱码,如图,我访问百度HTTP请求,响应数据中的title处是一串乱码 2.我们需要改一个设置,打开jmeter\bin\jmeter.proper ...

  7. 移动端 H5图片裁剪插件，内置简单手势操作

    前面曾经写过一篇<H5图片裁剪升级版>,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中. 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计 ...

  8. [Linux] Linux 中的基本命令与目录结构

    Linux 中的基本命令与目录结构 目录 一.Linux 基本目录结构 二.基本命令 三.浏览目录 四.中间命令 五.更改密码 六.环境变量和 shell 变量 七.命令路径 八.文本编辑器 九.获取 ...

  9. Android获取状态栏高度、标题栏高度、编辑区域高度

    一.Activity界面的划分 简单说明一下(上图Activity采用默认Style,状态栏和标题栏都会显示):最大的草绿色区域是屏幕界面,红色次大区域我们称之为"应用程序界面区域" ...

  10. IOS中的JSON数据的解析

    解析Json数据 //加载.json文件 NSString *path = [[NSBundle mainBundle]pathForResource:@"product.json" ...