z-index无法正常工作 [英] z-index not working properly

问题描述

所以我在做一个网站，我有一个顶部的酒吧与一些盒阴影。然后我在下面有一个描述框。所以我设置z索引，以确保顶部的框阴影将覆盖具有以下css的描述框：

  #topbar {
 z-index：9999！important; 
} 
 #description {
 margin-top：0px; 
 z-index：-1！important; 
} 
  

jsfiddle

您会注意到，如果您更改 margin-top ，你可以看到阴影隐藏在描述下面！

为什么会发生这种情况，如何解决？ / p>

注意：元素不能有固定或绝对定位

解决方案

position：relative 。 z-index 仅影响定位元素。

更新JSFiddle： http://jsfiddle.net/BAW23/3/

So I am making a site and I have a top bar with some box shadow. I then have a description box directly underneath. So I set the z-indexes to ensure that the top bars box-shadow would go over the description box with the following css:

#topbar{
    z-index:9999 !important;
}
#description{
    margin-top:0px;
    z-index:-1 !important;
}

jsfiddle

you will notice if you change the margin-top, you can see that the shadow is being hidden underneath the description still!

why is this happening and how can I fix it?

note: neither element can have fixed or absolute positioning

解决方案

Add position: relative to both elements. z-index only affects positioned elements.

Updated JSFiddle: http://jsfiddle.net/BAW23/3/

这篇关于z-index无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！