html - Z-index 和列表项(新手)

Question

我正在制作乐谱目录。可用的工作表列在有序列表中，当鼠标悬停在“ View ”上时，会显示弹出预览图像。我注意到，当您向下滚动预览每张工作表时，可以通过图像看到当前工作表下方的 < li > 元素中的某些元素。我确信这与堆叠上下文/顺序有关，甚至与某处缺少“位置”有关，但我无法弄清楚。

我这里有一个场景:http://jsfiddle.net/4BwBX/

HTML:

<div id="SheetMusicStore">
    <ol class="enlarge">
        <li>
            <span class="view">[ view ]</span>
            <span class="preview"><img src="http://www.antonioromo.com/newsite/images/01gnw-tn.png" alt="Just Another Dusk" /><br />Just Another Dusk (Good Night Wishes)</span>
            <span class="name">Just Another Dusk (Good Night Wishes)</span>
            <span class="price">$3.99 BUY</span>
        </li>
        <li>
            <span class="view">[ view ]</span>
            <span class="preview"><img src="http://www.antonioromo.com/newsite/images/02gnw-tn.png" alt="My Nightlight" /><br />My Nightlight (Good Night Wishes)</span>
            <span class="name">My Nightlight (Good Night Wishes)</span>
            <span class="price">$3.99 BUY</span>
        </li>
        <li>
            <span class="view">[ view ]</span>
            <span class="preview"><img src="http://www.antonioromo.com/newsite/images/03gnw-tn.png" alt="Whisper of Love" /><br />Whisper of Love (Good Night Wishes)</span>
            <span class="name">Whisper of Love (Good Night Wishes)</span>
            <span class="price">$3.99 BUY</span>
        </li>
    </ol>
</div>

CSS:

/** Sheet Music Store **/
#SheetMusicStore {
    width: 500px;
    margin: 40px auto;
}
ol.enlarge{
    margin-left:0;
    font-family: 'Trebuchet MS', Helvetica, Tahoma, Arial, Sans-serif;
    font-size: 1em;
    color: #999;
    padding: 10px 20px;
    box-shadow: inset 0 2px 2px #582E58;
    border-radius: 6px;
    background: url(http://www.antonioromo.com/newsite/images/sheet-bg.png) repeat 0 0 scroll;
    color: #AAA;
}
ol.enlarge li{
    position: relative;
    z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    background: transparent url(http://www.antonioromo.com/newsite/images/sheet-item-bg.png) repeat-x bottom left scroll;
    padding: 5px 0 7px 0;
    list-style-position: inside;
    font-size: 12px;
}
ol.enlarge img{
    background-color: #eae9d4;
    padding: 6px;
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    border-radius: 4px;
}
ol.enlarge span.preview{
    position: absolute;
    left: -9999px;
    background-color: #eae9d4;
    padding: 10px;
    font-family: 'Trebuchet MS', Helvetica, 'Droid Sans', sans-serif;
    font-size: .9em;
    text-align: center;
    color: #495a62;
    box-shadow: 0 0 20px rgba(0,0,0, .75);
    border-radius: 8px;
}
ol.enlarge li:hover{
    color: #EEE;
}
ol.enlarge li:hover .view{
    color:#FFFFCC !important;
}
ol.enlarge .view:hover{
    cursor: pointer;
}
ol.enlarge span.preview img{
    padding: 2px;
    background: #ccc;
}
span.view:hover ~ span.preview{
    top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: 300px; /*distance from the left of the thumbnail to the left of the popup image*/
    z-index: 50;
}
ol.enlarge .price {
    width: 62px;
    height: 16px;
    position: absolute;
    top: 7px;
    right: 0;
    border-radius: 8px;
    background: transparent url(http://www.antonioromo.com/newsite/images/buy-bg.png) repeat 0 0 scroll;
    margin: 0 0 0 10px;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
    text-shadow: none;
    color: #BBB;
    text-decoration: none;
}
ol.enlarge .price:hover {
    color: #EEE;
    cursor: pointer;
}

我需要将预览图像放在其他任何图像之上。预先感谢您的帮助!

Answer 1

我通过从 ol.enlarge li 中删除 z-index:0; 声明来修复此问题:

ol.enlarge li{
    position: relative;
    /*z-index: 0; */ /*resets the stack order of the list items - later we'll increase this*/
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    background: transparent url(http://www.antonioromo.com/newsite/images/sheet-item-bg.png) repeat-x bottom left scroll;
    padding: 5px 0 7px 0;
    list-style-position: inside;
    font-size: 12px;
}

JSfiddle

Z-index 对我来说仍然有点黑暗艺术，但我相信通过声明 z-index: 0 你就将 li 从自然堆叠顺序(这实际上是您在本例中想要的，因为它们仅充当 .preview 图像的“ anchor ”)。这导致每个 li 彼此“堆叠”——尽管顺序与正常的自上而下流程不同——这就是为什么您要使用 li 的内容> 悬停的 li 上方可见。