瞄準兄弟姐妹使用CSS和僞元素

Question

我試圖寫一個簡單的步驟，形式劇本，我想用自定義標題工具提示的能力。我創建了一個名爲data-title的屬性來完成此操作，並在創建工具提示後使用僞元素::。我遇到的問題是工具提示出現在列表中的下一個兄弟姐妹的後面，而不是頂部。這裏是a link我的JS-小提琴，和下面的代碼：

富

酒吧

東西

富2.0

更多

li{ 
list-style:none; 
} 
.step-form{ 
width:90%; 
} 
.step-form li{ 
float: left; 
margin:0 5px; 
text-align: center; 
position: relative; 
z-index:10; 
} 
.step-name{ 
display: table-cell; 
vertical-align: bottom; 
text-align:center; 
margin:0 5px; 
z-index:20; 
} 
.step-num{ 
border: 2px solid #B8B5B5; 
border-radius: 50%; 
width: 15px; 
height: 15px; 
display: inline-block; 
margin:10px 5px; 

} 
.step-num[data-title]:hover:after { 
background: #366F9E; 
border-radius: .5em; 
bottom: 2em; 
color: #fff; 
left: -2.5em; 
content: attr(data-title); 
display: block; 
padding: .3em 1em; 
position: absolute; 
text-shadow: 0 1px 0 #000; 
white-space: nowrap; 
opacity:1; 
z-index: 30; 
} 

請記住我試圖使這個簡單，重量輕越好。謝謝！

Answer 1

你需要避免李元素創建堆疊環境。避免在他們設定一個數值的z-index，而是將其設置爲自動

.step-form li{ 
float: left; 
    margin:0 5px; 
    text-align: center; 
    position: relative; 
    z-index: auto; // change this 
} 

fiddle