Question

我用html / css / jquery制作了这个条形图，当你悬停一个条形图时，你会获得更多信息。这个＆＃34;弹出＆＃34;只能在之前的酒吧之上，但没有以下的酒吧？为什么呢？

HTML

<li>
    <div style='height:87%' class='graphs'>
        <span class='info'>2014-05-07 downloads: 461</span>
    </div>
</li>

CSS

#bars li {
    display: table-cell;
    vertical-align: bottom;
    z-index:1;
    position:relative;
}

#bars li .graphs{
    border-radius: 5px 0px 0 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.8) 0 1px 1px;
    background-image: linear-gradient(to bottom, #32CD32 0%, #228B22 100%);
    background-clip: content-box;
    width:100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display:none;       
    opacity: 0.8;
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
     transition: opacity 1s ease-in;        
    z-index:1;
    cursor:pointer;
    position:relative;
}

#bars li .graphs:hover{
    -webkit-transition: margin-bottom 1s,opacity 1s ease-out, -webkit-transform 1s;  /* For Safari 3.1 to 6.0 */
    transition: margin-bottom 1s, opacity 1s ease-out, transform 1s;
    margin-bottom: 20px;
    filter: alpha(opacity=100);
    opacity: 1;

}
#bars li .graphs span.info{
    display:none;
    padding: 5px;
    border-radius: 3px 3px 3px 3px;
    background-color:rgba(240, 232, 232, 0.9);
    position:absolute;
    top:0px;
    left:-100px;
    z-index:3;
    width: 100px;
    box-shadow: rgba(0, 0, 0, 0.8) 0 1px 3px;
}

更多信息：

http://jsfiddle.net/4PNmD/2/

Answer 1

所有#bar的儿童都拥有相同的z-index。因此，当它们被添加到DOM中时，它们似乎在语义上堆叠在一起。你可以添加

#bars li:hover {
  z-index: 10;
}

让它正常运作。

Answer 2

问题是由于li的每一个都建立了自己的堆叠环境。 z-index仅用于同一上下文中的元素。

框出现在其自身栏左侧的栏上方，并隐藏在右侧栏下的原因是因为排序发挥作用。 li处于相同的堆叠环境中 - li之间的孩子不在！由于li都具有相同的z-index，因此规范表明元素的顺序决定了哪个元素堆叠在另一个元素上。

参考：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

z-index仅适用于以前的孩子？

2 个答案: