我制作了一个滚动菜单,当我尝试选择它时,菜单列表位于一个对象(一个简单的音乐播放器)的后面。我怎样才能把那个对象放在较低的级别?我知道我应该使用 z-index 命令,但我不知道值。我都试过了。
z-index:0;
z-index:1;
z-index:auto;
我还能用什么?
值得注意的是,z-index
仅在position
ed 元素(absolute
、、relative
或fixed
)上遵守。如果将 az-index
放在非定位 ( static
) 元素上,它将被忽略。
的值z-index
是任何整数或auto
;
z-index
仅适用于具有position
ofabsolute
或relative
的显式定位元素fixed
。
此外,它们的“堆叠上下文”与它们在 DOM 中的位置有关。两个兄弟元素在同一个堆叠上下文中,但它们的子元素在一个新的堆叠上下文中(因此,如果您有两个同级父元素z-index: 1
,其中一个有一个直接子元素,z-index: 1
另一个有一个直接子元素z-index: 2
,后者将具有更高的值z-index
,因为它的堆叠上下文是 1-2 而不是 1-1。但是,例如,如果您有两个父兄弟元素,其中一个的 z-index 比另一个高,那么具有较低 z-index 的父元素的后代z-index
将永远不会有z-index 比具有更高 的父级的子级更高z-index
,即使您将前者的子级设置为z-index: 500
或类似的东西。基本上,堆栈上下文存在于 DOM 的每个级别,并且它们的效果级联到由其后代生成的所有较低堆栈上下文。
z-index
很难掌握,需要非常注意标记和 DOM 结构。您需要发布所有相关的 CSS 和 HTML,以便我们为您提供帮助。
你可以在Mozilla 开发者网络上阅读更多关于 z-index 的内容