CSS元素层叠级别及z-index

声明

定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。

平台:win/IE win/FF

z-index:

用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序

值:   auto | 整数 | inherit

默认:  auto

适用于: 定位元素

继承性: no

理解stacking context

每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking context,其他stacking context由定位元素设置z-index为非auto时产生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素产生stacking context。stacking context和 containing block 并没有必然联系。

理解stack level

在一个stacking context中的每个box,都有一个stack level(即层叠级别,以下统一用stack level),它决定着在同一stacking context中每个box在z轴上的显示顺序。同一stacking context中,stack level值大的显示在上,stack level值小的显示在下,同一stack level的遵循后来居上的原则(back-to-front )。不同stacking context中,元素显示顺序以父级的stacking context的stack level来决定显示的先后情况。于自身stack level无关。注意stack level和z-index并不是统一概念。(将在后文慢慢理解)

stack level规则

每个stacking context中可包含块级(block)元素、内联(行内inline)元素,还有设置float属性的元素、定位元素等等他们在同一父级 stacking context中的显示顺序是怎样的?即stack level是怎样的呢?比如一个块级元素和内联元素发生层叠的话谁会在上面呢?是不是谁在后面谁就在上面呢?

根据w3c关于stack level的介绍可以得出以下stack level规则

每个stacking context都包括以下stack level (后来居上):

父级stacking context的背景、边界

z-index值为负值的定位元素(值越小越在下)

文本流中非定位的、block块级子元素

文本流中非定位的、float浮动子元素

仿佛能产生stacking context的inline元素

否则,inline元素的stack level将在block元素之前。

z-index:auto/0的定位元素

z-index值为正的定位元素(值越大越在上)

时间: 2025-01-21 15:37:30

CSS元素层叠级别及z-index的相关文章

常用CSS元素div ul dl dt ol的简单解释

css 几个css元素的简单解释 div ul dl dt oldiv,这个很常见,块级元素,div尽量少用,和table一样,嵌套越少越好 ol  有序列表. <ol>  <li>--</li>  <li>--</li>  <li>--</li></ol> 表现为: 1--2--3-- ul 无序列表,表现为li前面是大圆点而不是123 <ul><li>--</li><

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

一个CSS元素同时有多个类选择器的例子

一个元素可以同时有多个类选择器.注意,多个类选择器有冲突时,在Css文件里最后写的那个类选择器优先级最高. 在下面的例子中,<div>有cls1和cls2两个类选择器,注意其写法,需要在一个class标识符内按顺序用空格隔开写. 例: html文件: <html> <head> <title>一个元素同时有多个类选择器</title> <link rel="stylesheet" type="text/css&

一个CSS元素同时有id选择器和类选择器的例子

一个元素可同时有id选择器和类选择器,但只能有一个id选择器,且id选择器的优先级大于class选择器. 例: html文件内容: <html> <head> <title>一个元素可同时有id选择器和类选择器</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body&

css元素定位_CSS/HTML

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 { positi

CSS规则层叠的应用 css必须要注意的几点_经验交流

理论基础是必要的,实践是提升和理解理论的方法,两者同样重要,任何设计和开发人员离开这两者的平衡,不论偏向哪一方,都会范或左或右的错误.不过我所讲的这个方法在实际应用中到底有什么用呢.显然,它不能够给我们创造出圆角矩形,也不能够给我们创造出分列布局,更加不可能给我们一个固定在文档头部的导航栏.这个算法的实践应用在于: 良好的CSS编程规范 .这是一个宏观的实践,与我刚才提到的微观实践同样重要,但却更加难以掌握. 本文并不想包含所有的良好的CSS编程规范,也不可能,我所能够提供的也只是我个人编写CS

CSS规则层叠时的优先级算法_经验交流

inline style  embeded style  external style  user style  inline style是丑陋的,它们穿梭在HTML文档中,与HTML元素扭成一团,给Web前端开发人员造成了许多麻烦.它们往往以这样的面目出现: <p style="color:red;">This is a paragraph.</p> embeded style比inline style绅士一些,它们也寄宿在HTML文档中,但是它们不屑于与HT

CSS规则层叠时的优先级算法

CSS 规则的优先级是Web前端开发人员必须理解的一个概念,我们常用的添加样式的方法有4种. inline style embeded style external style user style inline style是丑陋的,它们穿梭在HTML文档中,与HTML元素扭成一团,给Web前端开发人员造成了许多麻烦.它们往往以这样的面目出现: <p style="color:red;">This is a paragraph.< /p> embeded sty

浅析CSS——元素重叠及position定位的z-index顺序

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复出错......于是决定把重叠问题弄清下,把z-index理顺下. 经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序.总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发.   元素