CSS教程:IE中的z-index迷惑(1)

CSS的z-index属性,看下面的介绍:
z-index : auto | number 
  auto: 默认值。
  number: 无单位的整数值,可为负数 。
  z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。
  注意:这个属性不会作用于窗口控件,如 select 对象。
  在IE5.5+中, iframe 对象开始支持此属性。而在之前的浏览器版本中, iframe 对象是窗口控件,会忽略此属性。
  z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack order)。
  每一个定位元素都归属于一个stacking context。根元素形成root stacking context,而其他的stacking context则由定位元素产生(此定位元素的z-index被定义一个非auto的z-index值),定位子元素会以这个local stacking context为参考,用相同的规则来决定层叠顺序。并且stacking context和 containing block 之间并没有必然联系。
  当stacking context一样的时候,就用z-index的值来决定怎样显示,如果z-index也相同(即stack level相同),则按照档中后来者居上的原则(back-to-front )的顺序来层叠。
  当任何一个元素层叠另一个包含在不同stacking context元素时,则会以stacking context的层叠级别(stack level)来决定显示的先后情况。也就是说,在相同的stacking context下才会用z-index来决定先后,不同时则由stacking context的z-index来决定。例如:
  定位元素A(z-index:100)里面有定位元素A1(z-index:300),而定位元素B和元素A兄弟关系(z-index:200)。你会发现无论A1的z-index是多大,也会被z-index是200的B所覆盖,因为A的z-index只有100。
  阅读更详细的内容:http://www.w3.org/TR/CSS21/visuren.html#z-index

时间: 2024-09-21 01:23:31

CSS教程:IE中的z-index迷惑(1)的相关文章

强烈推荐:非常不错的样式表CSS教程(4)

css|教程|样式表 ●Specificity 本节讲述的是用来判断样式优先权的是"specificity"."specificity"和选择符selector中元素的数目以及元素的属性有关,"specificity"高的优先应用. 怎样计算选择符的"specificity"值呢?涉及到三项内容: 1.选择符中ID标识符属性的数目A 注意:一个匹配ID的属性选择符不能算作一个ID,它仅能当作一个属性选择符.例如"id

经典实用CSS教程详细讲解

css|教程 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具

CSS教程—元素的定位

css|教程 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位example: 以下是引用片段:>#div-1 {  position:static; }2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px:example: 以下是引用片

强烈推荐:非常不错的样式表CSS教程(3)

css|教程|样式表 ■继 承 和 层 叠 CSS规则影响元素的显示形态,但是如果没有样式匹配或者存在多种样式规则同时匹配该元素时,元素显示的形态到底是遵循哪个规则呢?本节论述的内容涉及到样式的继承和层叠方面的知识. ●继 承 有些样式通过默认的样式设置而"继承",也就是说,子元素继承父元素的样式规则,包括color.font和text-align等等. 例如: p { color: red } ... <p>Sample paragraph with <b>b

强烈推荐:非常不错的样式表CSS教程(2)

css|教程|样式表 元素的属性(Attribute)也可以用于selector.下面的列表中例举了几种模式: Attribute Selector Patterns 模式 说明 E[attr] Attribute selector属性选择器.匹配任何含有该属性的E元素,不必考虑它的值的大小 E[attr="value"] Attribute selector,属性选择器.匹配任何具有该属性的元素E,条件是属性的值必须与设定的值相等. E[attr~="value"

强烈推荐:非常不错的样式表CSS教程(1)

css|教程|样式表 本文是一篇关于CSS的应用概述,并提供了一些示例来演示CSS是如何工作的,以便于你更加有效的学习CSS. 本文并不是参考或者兼容性指南一类的文章(尽管其中有一些非常好的参考和兼容性注解的链接).如果你已经习惯了使用CSS,并想学到更多样式表的知识,我们保证你会在本文中能够找到一些非常有用的信息:). ●CSS不能做什么? 层叠样式表通常被理解为实现"内容"和"风格"分开的手段.其实这种说法并不完全正确,因为根据你对"风格"和

DIV CSS教程:margin叠加原理以及边界条件浅谈

css|教程|条件 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: 元素的顶边界与前面元素的底边界发生叠加 当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: 元素的顶边界与父元素的顶边界发生叠加 尽管初看上去有点儿

CSS教程——元素定位

css|教程 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位example:#div-1 { position:static;}2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px:example:#div-1 { position:r

CSS样式表中z-index使用方法总结

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. Z-index是什么意思?在CSS2.0中,Z-index 属性用来设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺

CSS在IE6中的bug

1. 使用doctype 你应该在一直每个html文件的头部都使用doctype,并且我们推荐使用strict 版本,比如: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">或者,对于xhtml使用: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//e