z-index值小的,zindex属性值

http://www.itjxue.com  2023-01-07 06:50  来源:未知  点击次数: 

z-index怎么使用,什么时候使用这个属性

1、z-index 需要配合position

2、CSS中设置属性position后z-index才有效果

3、z-index表示层叠数值,数值越大越靠上,数值月越小越靠下方

4、设置position后标签属性是可以重叠的

5、设置position属性后同时top bottom、left、right 相对位置也生效、否则以上属性全无效

6、我回答的这几点是我的经验总结,无抄袭,抄袭必究。谢谢请采纳

z-index:关于值大被值小覆盖的问题

原有一dom结构如下:

其css部分如下:

想在 top 中添加一个 相对定位 的 ul ,如下:

期望是这个样子的:

然而得到的结果是这个样子的:

在浏览器中查看 top 中的 ul 的 z-index 值为 4

bottom 中的 cover 的 z-index 值为 3

按照上面的理论来说, top 的 ul 应该显示在上面,然后实际情况却相反。甚至 top 的 ul 的 z-index 值设置成 999 还是依旧在下面,那么问题出现在哪里呢?是否和其父元素的 z-index 值有关呢?

此处 top 的 z-index 值为 1 ,将其改为 4 ,OK;将其改为 3 ,则否。而无论怎么修改 top 中 ul 的 z-index 值都不会影响到结果。

此处可以将 top 和 bottom 下的 cover 看做是同一层级的比较, z-index 值相同时,后面的覆盖前面的;不同时,值大的覆盖值小的。

另一方面,将 bottom 设置成如下:

由此可知:在同一个dom元素下(如这里的 box ),两个元素的 z-index 值的比较,实际是其设置了 z-index 值父元素的比较(或者说“仅拼爹”)。

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。

z-index 的用法?

z-index 用在绝对定位的容器上。不是绝对定位的容器用这个样式是没有用的。

z-index 的值大的容器会叠在z-index 的值小的容器上面。比如一个窗口弹出覆盖另一个窗口。

.testCss

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

css的z-index默认是几,最大最小是多少?

css中z-index的默认值是auto;这是属性自带的属性值。平时自己设置一般是数字,最小值是0,没有最大值一说。

请问css的z-index的问题?

z-index属性:较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象,此属性的 number 值为正数的对象会在其之上,而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。

因此,在z-index属性值相同的情况下,后声明的会覆盖先前声明的标签;

(责任编辑:IT教学网)

更多

推荐Flash教程文章