现在来说说关于z-index的用法，刚刚在写看页面的时候遇见这样的CSS代码，z-index : 2; 当时还不知道是干嘛用的，也不知道有什么作用，上网查了资料才知道。

几个例子吧，当你在需要把页面中的某个元素固定在页面中某个位置的话，你需使用这样的代码： position : fixed;  来固定，如果你不用z-index  : 2;  来设定的话，被固定的元素会随着页面的切换而改变。  这个属性值是可以随便设置的，但最好是正值，值越大那么这个元素就会被放在最上面。    那么现在有这样一个问题，如果同时有几个这样的z-index属性而且属性值还一样，那么会怎样布局呢，这个问题很简单。

<style>

#block1{

background-color:#fff0ac;

border:1px dashed #000000;

padding:10px;

position:absolute;

left:20px;

top:30px;

z-index:1

}

#block2{

background-color:#ffc24c;

border:1px dashed #000000;

padding:10px;

position:absolute;

left:40px;

top:50px;

z-index:1

}

#block3{

background-color:#c7ff9d;

border:1px dashed #000000;

padding:10px;

position:absolute;

left:60px;

top:70px;

z-index:0

}

</style>

<body>

<div id="block1">aaaaaaa</div>

<div id="block2">bbbbbbb</div>

<div id="block3">ccccccc</div>

</body>

这样的一段代码，书上说z-index值越大的会在值小的上面，这个block1和block2的z-index同时为1，block2会在block1上面。

reason：

-index属性：较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。

因此，在z-index属性值相同的情况下，后声明的会覆盖先前声明的标签；

z-index 用法的更多相关文章

  1. oracle唯一索引与普通索引的区别和联系以及using index用法

    oracle唯一索引与普通索引的区别和联系 区别:唯一索引unique index和一般索引normal index最大的差异是在索引列上增加一层唯一约束.添加唯一索引的数据列可以为空,但是只要尊在数 ...

  2. @Index用法——javax.persistence.Index

    package com.springup.utiku.model; import java.io.Serializable; import javax.persistence.Entity; impo ...

  3. jQuery中的index用法与inArray用法

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 【转】Java enum的用法详解

    用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. p ...

  5. Java enum的用法详解[转]

    Ref:http://www.cnblogs.com/happyPawpaw/archive/2013/04/09/3009553.html 用法一:常量 在JDK1.5 之前,我们定义常量都是: p ...

  6. Java 枚举7常见种用法

    DK1.5引入了新的类型--枚举.在 Java 中它虽然算个"小"功能,却给我的开发带来了"大"方便. 用法一:常量 在JDK1.5 之前,我们定义常量都是:  ...

  7. Java 枚举7种常见用法

    (转)原创地址:http://blog.lichengwu.cn/java/2011/09/26/the-usage-of-enum-in-java/ JDK1.5引入了新的类型--枚举.在 Java ...

  8. Java enum的用法详解

    (转自:http://www.cnblogs.com/happyPawpaw/archive/2013/04/09/3009553.html) 用法一:常量 在JDK1.5 之前,我们定义常量都是: ...

  9. Java enum(枚举)的用法详解（转）

    用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. p ...

  10. java- 枚举的常见用法

    用法一:常量 public enum MyColor{Red,Black,Blue} public enum Color { RED, GREEN, BLANK, YELLOW } enum为枚举类的 ...

随机推荐

  1. 引擎设计跟踪(九.14.2e) DelayLoaded DLLs (/DELAYLOAD)

    关于DLL的delay load: http://msdn.microsoft.com/en-us/library/151kt790.aspx 最近在做GLES的shader compiler, 把现 ...

  2. 创建第一个MVC

    创建第一个MVC(asp.net)和默认路由设置 Asp.net的MVC已经出到了4.0,我用的是visual studio2013,接下来努力学下MVC,学之前的话我建议大家先去学下三层(分别是DA ...

  3. 已有a,b两个链表，每个链表中的结点包括学号、成绩。要求把两个链表合并，按学号升序排列

    1.我的思路先将b链表连接在a链表的后面,这个很容易实现,将a链表最后的结点中的p.next改为指向b链表的头结点即可. 再将这个新链表用选择排序即可. 代码如下: #include<stdio ...

  4. maven 构建spring ssh mybatis 配置

    详情参与 http://blog.csdn.net/yuguiyang1990/article/details/8811817 前面我们使用Maven构建了Struts2项目,这里我们来试一下Hibe ...

  5. POJ 2136

    #include <iostream> #include <string> #define MAXN 26 using namespace std; int _m[MAXN]; ...

  6. 历代诗词咏宁夏注释1----常星景:< 六盘>

    六盘 常星景 关中形势甲天下,四岳分峙西太华.[1] 中有汭泾经纬之,六盘嵚崎历历落.[2] □□□□其流亚,终年峰头雪不消. 弟畜太白兒美高,眼底培缕纷纷何足数,呼吸想通天尺五.[3] 西北堆镇一切 ...

  7. Ado.Net要知道的东西

    什么是ADO.NET? ADO.NET就是一组类库,这组类库可以让我们通过程序的方式访问数据库,就像System.IO下的类用类操作文件一样,System.Data.这组类是用来操作数据库(不光是MS ...

  8. Linux目录结构【转】

    使用linux也有一年多时间了  最近也是一直在维护网站系统主机  下面是linux目录结构说明 本人使用的是centos系统,很久没有发表博文了 近期会整理自己所用所了解知识点,发表linux相关的 ...

  9. mysql变量使用总结

    set语句的学习: 使用select定义用户变量的实践将如下语句改成select的形式: set @VAR=(select sum(amount) from penalties);我的修改: sele ...

  10. 【poj1284-Primitive Roots】欧拉函数-奇素数的原根个数

    http://poj.org/problem?id=1284 题意:给定一个奇素数p,求p的原根个数. 原根: { (xi mod p) | 1 <= i <= p-1 } is equa ...