所有关于.... Z-Index? [英] All About.... Z-Index?

查看:141
本文介绍了所有关于.... Z-Index?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这个属性让我困惑。



很好..我在google搜索:



什么是z-index?



z-index属性指定元素的堆栈顺序。
具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素前面。
注意:z-index只适用于定位的元素(位置:绝对,位置:相对或位置:固定)。回答来源



z-index使用什么? / p>

元素彼此重叠的顺序。
为此,您可以为每个元素分配一个数字(z-index)。系统是具有较高数字的元素与较小数字的元素重叠。
回答来源



我明白了,现在,它组织的元素,我们可以使用任何数字...更高的Z-索引号出现在所有elements..ok很好。



z-index和jquery ..非常简单和非常好



...我注意到从答案,它依赖于position属性,所以 - > ...(谷歌)..



z-索引和位置?



demo - > >> 来源



好的...所以z索引和位置都是夫妇...必须在一起..



需要更多信息::



它会在浏览器中产生任何冲突(IE7,IE8,chrome等...)



z-index使用什么或者我们可以用z-index做什么(取决于标签)



... etc?



如果我理解错误,请更正我...



提前感谢。

解决方案

Z-index是决定哪个html元素当它们重叠时出现在antoher html元素的顶部。基本思想是具有最高z-索引的元素是在顶部。



默认情况下,元素的z索引为零,但是设置css如果它们重叠,一个元素的属性为1,另一个为5将使得后一个元素在前者的顶部。



到目前为止,但是有几件事要注意。



一个,如在另一个答案中已经提到的,z-index只有在元素定位在位置绝对,固定或相对。 (即css属性position)。未定位的元素的z-index为零。



进一步使事情复杂化(在我的经验中,通常不被理解的领域)是堆叠上下文的概念。有关详情,请参阅等文章。总之,每次你明确地设置一个新的z索引,你开始一个新的堆叠上下文。设置z-index的一个的所有子元素现在都位于这个新的声明上下文中,该上下文可以在另一个未被重用的元素上的堆叠上下文之上或之下。



这个堆叠上下文是什么意思?这意味着z-index为100的元素不必位于z-index为1的元素之上。如果它们在不同的堆栈上下文中,则只有堆栈上下文的z-index非常重要。


This property make me confuse.

well.. i searched in google:

What is the z-index?

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Answer Source

What is the z-index uses?

The order of which the elements overlap one another. For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number. Answer Source

Ok i understand now , it organize the elements and we can use any number ... the higher z-index number appears on all elements..ok nice.

z-index and jquery..very simple and very nice

...but i noticed from the answers that it depend on position property, so -->...(google)..

What is the relation between z-index and position?

demo--> >>source

Ok ... so z-index and position are couple..must be together..

need more information ::

dose it make any conflicts in browsers(IE7,IE8,chrome,...etc)?

What are the z-index uses or what can we do with z-index(depending on the Tags)?

...etc?

correct me if i understand wrong...

Thanks in advance.

解决方案

Z-index is the property that determines which html element appears on top of antoher html element when they overlap. The basic idea is that the element with the highest z-index is "on top".

By default, elements have a z-index of zero, but setting the css property on one element to 1, and another to 5 will make the latter element be "on top" of the former, if they overlap.

So far, so simple, but there are several things to look out for.

One, as already mentioned in another answer, is that z-index only has an effect if the element is positioned with position absolute, fixed or relative. (i.e. the css property "position"). An unpositioned element has a z-index of zero.

To complicate things further (and in my experience the area that is often not understood) is the concept of the stacking context. More info can be found in articles such as this. In short though, each time you explicityly set a new z-index, you start a new stacking context. All child elements of the one on which the z-index was set are now in this new stating context, which may be above or below a stacking context on another unreleated element.

What does this stacking context mean? It means that an element with a z-index of 100 is not necesarily on top of an element with z-index of 1. If they are in different stacking contexts, only the z-index of the stacking context's themselves matters.

这篇关于所有关于.... Z-Index?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆