Question

我正在制作乐谱目录。可用工作表列在有序列表中，当鼠标悬停在“视图”上时，会显示弹出预览图像。我注意到，当您向下滚动预览每张纸时，某些元素来自＆lt; 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

我通过从z-index:0;删除ol.enlarge li声明来解决此问题：

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图像的“锚点”。这导致每个li“堆叠”在彼此之上 - 尽管顺序与正常自上而下的流程不同 - 这就是为什么你li的内容高于悬停li的原因。 1}}是可见的。

Z-index和列表项（新手）

1 个答案: