z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack order)。

margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局,但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。

浮动元素会脱离文档的普通流,有可能覆盖或遮挡掉文档中的元素。

当为元素设置position值为relative/absolute/fixed后,元素发生的偏移可能产生重叠,且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面

z-index只能在position属性值为relative或absolute或fixed的元素上有效。

z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(如果有)为子元素定义了堆叠顺序(css版堆叠“拼爹”)。

向上追溯找不到含有z-index值的父元素的情况下,则可以视为自由的z-index元素,它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值,决定其堆叠顺序。

ie6、7下面position值为非static的元素在未设置z-index值的情况下都会被隐含添加z-index:0,

Firefox/Chrome等现代浏览器会遵循标准默认z-index:auto不会产生值。

负值的z-index也依照大小比较的原理,但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题,请谨慎使用。

学习笔记day6:position index结合的更多相关文章

  1. css布局学习笔记之position属性

    position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...

  2. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  3. CSS布局学习笔记之position

    CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一 ...

  4. html学习笔记之position

    今天主要一直看试验position的各种属性,现在记录下来以此备忘. position有四种常有属性,分别是static,fixed.absolute,relative fixed就是相对于窗口的位置 ...

  5. Python学习笔记 - day6 - 函数

    函数 函数在编程语言中就是完成特定功能的一个词句组(代码块),这组语句可以作为一个单位使用,并且给它取一个名字.可以通过函数名在程序的不同地方多次执行(这叫函数的调用).函数在编程语言中有基本分为:预 ...

  6. python学习笔记-Day6(3)

    代码书写原则: 1)不能重复写代码 2)写的代码要经常变更 编程模式概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数 ...

  7. python学习笔记-Day6(2)

    xml处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...

  8. python学习笔记-Day6(1)

    shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式 >>> s=shelve.open('test') > ...

  9. 学习笔记day6:CSS3动画属性

    总结: 1: CSS动画:@keyframes  animation:ie10+:加-webkit前缀: animation 则是属于关键帧动画的范畴; 它本身被用来替代一些纯粹表现的javascri ...

随机推荐

  1. linux下对sh文件的操作

    1.创建test.sh文件 touch test.sh 2.编辑sh文件 vi test.sh(i:插入 | esc:退出insert模式 | wq+回车:退出) 3.保存退出 敲击esc, 然后输入 ...

  2. C# winform 中MessageBox用法大全(附效果图) (转载+说明)

    声明:这篇文章是转载的转载的,由于原作者的博客被关闭 我就不再列出了,提前先说明下,if语句中的判断有些太长,建议提前声明一个变量, DialogResult MsgBoxResult;        ...

  3. java面试每日一题9

    题目:判断一个数是否是2的方次幂 public class Power { public static void main(String [] args) throws NumberFormatExc ...

  4. 查找素数(0~1000)的算法(Java代码)

    1.一般方法,设置标兵,进行查找 class prime{ //检查是否是素数 public void isPrime(){ ; ;i<=;i++){ ; ;j<i;j++){ ){ co ...

  5. 更改printk打印级别

    1.查看当前控制台的打印级别 cat /proc/sys/kernel/printk 4    4    1    7 其中第一个"4"表示内核打印函数printk的打印级别,只有 ...

  6. 开源数据库连接池proxool

    可以根据自己的实际情况,选择不同的配置,可以选择properties.XML.Servlet等配置,官方网站上都有介绍.   1.下载proxool 地址:http://proxool.sourcef ...

  7. Ajax案例:简易的购书网页

    ****使用Ajax可以不需要刷新整个页面,而使局部页面更新的技术: ****JSON是JavaScript得原生格式,JavaScript中处理JSON数据不需要特殊的工具或架包,其规则很简单,对象 ...

  8. MessageFlood 分类: 串 2015-06-18 17:00 10人阅读 评论(0) 收藏

    MessageFlood TimeLimit: 1500ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 Well,how do you feel about mobil ...

  9. Unity脚本在层级面板中的执行顺序测试1

    第二篇测试循环时和动态创建时的调用顺序:LINK 测试版本Unity4.6.因为新版本对Transform的排序做了改变,所以不排除旧版本的测试结果不一样.测试时,使用Awake中添加Debug.lo ...

  10. win10 + VS2015 + EF6 + MySQL

    前置配置 在下面的网址去安装最新版的 (Connector/Net http://dev.mysql.com/downloads/connector/net/#downloads) 然后安装 MySQ ...