讓字段出現在CSS樣式的頂部

Hello iive設法用css創建了一個星，但是它隱藏了我在星的前面顯示的字段。我想知道是否有人告訴我，我正確的方向，我應該怎麼做才能解決它。感謝讓字段出現在CSS樣式的頂部

<div class="views-field views-field-field-freebetamount"> 
<div class="field-content"> 
<div id="star12">£200</div> 
</div> 
</div>

CSS

.views-field-field-freebetamount { 
color:white; 
} 

#star12 { 
background: blue; 
width: 40px; 
height: 40px; 
position: relative; 

} 

#star12:before, #star12:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 40px; 
width: 40px; 
background: blue; 
} 

#star12:before { 
-webkit-transform: rotate(30deg); 
-moz-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 
-o-transform: rotate(30deg); 
} 

#star12:after { 
-webkit-transform: rotate(60deg); 
-moz-transform: rotate(60deg); 
-ms-transform: rotate(60deg); 
-o-transform: rotate(60deg); 
}

的freebetamount領域應該有希望出現在明星的頂部。我有限的CSS技能已經導致我嘗試Z-索引，但無濟於事。

有人嗎？

感謝

來源

2014-03-27 Reg Gordon

你有:before和:after僞元素定義negative z-index值。

#star12 { 
background: blue; 
width: 40px; 
height: 40px; 
position: relative; 
    font-size:1.3em; 
} 

#star12:before, #star12:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 40px; 
width: 40px; 
background: blue; 
    z-index:-1; 
}

檢查Demo。

來源

2014-03-27 18:00:21

是我的解決方案工作在你的情況？ –

你的演示工作正常Kheema，但doe一些原因不在我的測試網站。我不知道我是否能夠添加鏈接來顯示你，但你可以看到它在這裏的行動\ 9forgive nae其ust舊網址）http://islifeshit.com/casino –

希望我可以幫助你在真實情況下。 –

用CSS u需要設置z-index: 100或類似的東西放置在一些其他

來源

2014-03-27 17:59:40 GuiGreg

所有的一切都看起來像預期的那樣，Grg只是組成已經消失的明星的轉化位。 Kheema的演示很完美，這很奇怪。也許我會看看只是使用一個明星形象behid實地poss。 –

你會想看看的z-index的頂部。無論您想要在另一個上面顯示哪個元素，都需要具有更高的CSS z索引編號。

in css file;

#yourID { 
z-index: 99; 
}

來源

2014-03-27 17:59:56

謝謝你們的回覆。 Kheea你的方法可以像希望的那樣工作，但是它似乎刪除了所有來自css的明星元素，只剩下一個藍色框（顯示我的白色文本）。在我的.views-field-field-freebetamount中添加更多suggsted z索引似乎也不起作用。對不起，因爲這樣一個fud :( –

讓字段出現在CSS樣式的頂部

回答

相關問題