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的內容可見。