z-index 用法
现在来说说关于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 用法的更多相关文章
- oracle唯一索引与普通索引的区别和联系以及using index用法
oracle唯一索引与普通索引的区别和联系 区别:唯一索引unique index和一般索引normal index最大的差异是在索引列上增加一层唯一约束.添加唯一索引的数据列可以为空,但是只要尊在数 ...
- @Index用法——javax.persistence.Index
package com.springup.utiku.model; import java.io.Serializable; import javax.persistence.Entity; impo ...
- jQuery中的index用法与inArray用法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【转】Java enum的用法详解
用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. p ...
- Java enum的用法详解[转]
Ref:http://www.cnblogs.com/happyPawpaw/archive/2013/04/09/3009553.html 用法一:常量 在JDK1.5 之前,我们定义常量都是: p ...
- Java 枚举7常见种用法
DK1.5引入了新的类型--枚举.在 Java 中它虽然算个"小"功能,却给我的开发带来了"大"方便. 用法一:常量 在JDK1.5 之前,我们定义常量都是: ...
- Java 枚举7种常见用法
(转)原创地址:http://blog.lichengwu.cn/java/2011/09/26/the-usage-of-enum-in-java/ JDK1.5引入了新的类型--枚举.在 Java ...
- Java enum的用法详解
(转自:http://www.cnblogs.com/happyPawpaw/archive/2013/04/09/3009553.html) 用法一:常量 在JDK1.5 之前,我们定义常量都是: ...
- Java enum(枚举)的用法详解（转）
用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. p ...
- java- 枚举的常见用法
用法一:常量 public enum MyColor{Red,Black,Blue} public enum Color { RED, GREEN, BLANK, YELLOW } enum为枚举类的 ...
随机推荐
- The Brain vs Deep Learning Part I: Computational Complexity — Or Why the Singularity Is Nowhere Near
The Brain vs Deep Learning Part I: Computational Complexity — Or Why the Singularity Is Nowhere Near ...
- struts2漏洞原理及解决办法
1.原理 Struts2的核心是使用的webwork框架,处理action时通过调用底层的getter/setter方法来处理http的参数,它将每个http参数声明为一个ONGL(这里是ONGL的介 ...
- JavaScript之四种继承方式讲解
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- 树链剖分 - BZOJ 1036: [ZJOI2008]树的统计Count
这是树链剖分的入门题,也是我学树链剖分的第一题. 树链剖分:就是把树中和线段树联系起来,求(u,v)路径中权值的最大值和其路径的权值和. 入门blog:http://blog.sina.com.cn/ ...
- ObjC的Block中使用weakSelf/strongSelf @weakify/@strongify
首先要说说什么时候使用weakSelf和strongSelf. 下面引用一篇博客<到底什么时候才需要在ObjC的Block中使用weakSelf/strongSelf>的内容: Objec ...
- jquery的ajax同步和异步的理解及示例
之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去 ...
- 13test02：信用卡校验
/*#include<iostream> using namespace std; void input(); int counter=0,jishu_sum=0,oushu_sum=0, ...
- appium获取android app的包名和主Activity
方法一在appium的android setting中选择下载到电脑上的app包,获取Activity. 方法二在android-sdk中安装build-tools包,进入这个目录.aapt dump ...
- hdu 2571 命运（递推，请小心）
题目 //不能广搜,会超内存//可以用dp思想模拟//map 后来保存的是 保存由前面推来的最大的幸运总值的点//下标从1开始,不然倍数会有问题 //AC 代码: AC代码 //不能广搜,会超内存 / ...
- HDU 1397 Goldbach's Conjecture(二分，查找素数)
题目意思很简单,就是找n=p1+p2的种类数,具体看题目吧. 次重点是查找一定范围内的素数: 重点是用二分查找,不然会超时!!! #include<stdio.h> #include< ...