时间:2021-05-08
如果你不是一名csser新手,想必你对z-index的用法应该有个大致的了解了吧,z-index可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序,本文不去讲述基本的API如何使用,而是去更深入的了解z-index是如何工作的,使用z-index的时候有哪些问题,以及z-index在日常开发中的使用。
下面我们通过一个例子来引入今天的正文,代码示例:
如下图:
上述代码通俗易懂,下面有个问题请大家思考:
在遵循下述规则的情况下,如何使用红色span元素在green和blue元素后面?
1) 不能以任何方式更改html标记;
2) 不能增加或改变任何元素的z-index属性;
3) 不恩增加或改变任何元素的position属性;
请大家思考,这个问题改如何解决?说明其原因?
———————————– 分割线 ———————————————-
1) 一个box和它的父亲有相同的堆叠级别(stack level),除非该box被通过z-index属性赋予了不同的stack level;
2) z-index属性只适应于position属性为relative、absolute、fixed的元素对象;
3) 给一个被定位(positioned)元素设置小于1的opacity属性值,意味着创建了一个堆叠上下文(stack context),就像给该元素增加了一个z-index值;
4) 对于一个被positioned box,如果指定了z-index属性,意味着:
->该box的stack level 在当前的stack context中;
->该box建立了个本地stack context;
5) 如果box没有指定z-index,元素将被按下面的顺序堆叠(stacked)(从后到前):
-> 正常流中的boxes,根据在源代码中的序列;
-> 浮动boxes;
-> computed后display属性值为inline/inline-block/inline-table的boxes;
-> positioned boxes 和boxes 设置opacity值小于1,根据在源代码中的序列;
因此,当我们给一个positioned元素设置了z-index时,我们做了两件事:
1) 该元素与在它前面或者后面的元素共享着相同的stack context,这也就是我们改变z-index的值,元素会移动其他元素前后者后的原因。
2) 为该元素内的任何元素创建了一个新的stack context,一旦你创建了一个stack context,内部的任何有(stack context)的任何层都会停留在这个stack context。
通过上述的黄金法则,也许你已经知道上面那个问题的答案了。在黄金法则里,我们提到了个新名词“stack context”,下面我们通过一个实例来介绍它:
一个很特殊的情况是,在一个document中,没有任何定位,document有且只有一个堆叠环境 – 通过HTML创建。
下面我们给上例添加如下样式:
在这种情况下,h1,p都创建了一个stack context,这两个stack context都在document的stack context内。增加样式后h1在p元素之上。如果我们给em元素增加如下样式结果又会怎样:
增加此样式后em创建了stack context,由于em的z-index属性,它的内部的text比p标签中的其它text更接近用户。因为它是在p的stack context内部,它是一直比h1中的text低的。
注意:如果你增加z-index的值,是不能使用em位于h1之上的。如果你想一个context的元素位于另一个context中的元素之上,你必须提升整个context或者设置它们为相同的context。
下面是两种解决方案:
方案一:
方案二:
那么创建stack context的方式有哪些?
1) When an element is the root element of a document (theelement)
2) When an element has a position value other than static and a z-index value other than auto
3) When an element has an opacity value less than 1
Update: In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
In WebKit, styling a box with position:fixed or -webkit-overflow-scrolling:touch implicitly creates a stacking context, just like adding a z-index value.
Also, be aware of these CSS3 “triggers”:
transform != none
transform-style: preserve-3d
filter != none
clip-path, mask
Lastly, even though a relatively positioned element without a z-index set does not establish a stacking context…
A common IE bug, often seen in drop-down menus, is that any relatively positioned element that has haslayout set to true establishes a stacking context.
One may visualize this bug by setting [A] and [B] to position:relative, while [a] gets position:relative; z-index:1.
Now, dragging [A] under [B] hides [a] – in Internet Explorer, that is. Any positioned child with a z-index is caught by this wrong stacking context of its parent.
1) IE6中的
select元素是一个窗口控件,所以它总是出现在层叠顺序的顶部而不会顾及到自然层叠顺序、position属性或者是z-index。可以在div元素上添加一个iframe设置为position:absolute,并设置div的z-index比iframe的高。
2) 因父容器(元素)被定位的缘故,IE6/7会错误的对其stacking context进行重置。
3) 在Firefox2版本中,一个负的z-index值会使元素位于stacking context的后面,而不是位于公认的背景和边框这样的元素stacking context之前。
本文到此结束,最后附上本文开始时提出的问题的答案:
感谢您的阅读,文中不妥之处,还望批评指正。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
z-index无效在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效。在CSS中,只能通过代码改变层级,这个属性就是z-inde
z-index是CSS中决定网页中容器元素垂直显示顺序的属性,比如两个div,z-index值大的将遮盖小的div.而select控件由于其浏览器开发实现方法和
在做项目的时候,居然单击后显示的顺序一直被别的li标签压着,最后终于找到了,是css的z-index属性赋值了,值越大,显示的层就越高。 z-index是
CSS书写顺序1.位置属性(position,top,right,z-index,display,float等)2.大小(width,height,paddin
CSS样式:复制代码代码如下:DIV.neat-dialog-cont{Z-INDEX:98;BACKGROUND:nonetransparentscrollr