Z索引和列表项目（新手）

Question

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

我这里的情景：http://jsfiddle.net/4BwBX/

HTML：

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-指数仍有点黑暗艺术给我的，但我相信，通过声明z-index: 0你从li出来的自然堆栈顺序（这实际上是你想要在这种情况下，因为他们只是作为你的.preview图像的“主播”）。这导致每个li在彼此之上“堆叠” - 虽然顺序与正常自上而下的顺序不同 - 这就是为什么您看到li上方li的内容可见。