的z-index使用滑塊模塊

我通常不張貼到論壇，但我非常希望瞭解爲什麼紅格右手邊（文本），不會對白色導航欄的頂部出現。它總是出現在它後面。的z-index使用滑塊模塊

我玩過的位置是：相對/絕對使用螢火蟲項目，並設置的z-index。然而它似乎不有所作爲，並把紅色的div到前面。我想知道這是否是因爲涉及JavaScript？

希望瞭解是什麼導致分層問題和潛在的CSS來解決該問題的一些指導。

URL http://tinyurl.com/p445t34

來源

2014-07-16 Adam Kwiatkowski

'我通常不會發布到forums'，直到我找到這個，StackOverflow，我的情況一樣。 –

這不是一個論壇...這是一個問答網站。您提出問題並獲得答案。論壇邀請討論，我們不會。 – Liam

希望我的回答有一些幫助。如果您有任何問題，請告訴我。 – AndrewPolland

要出現以上（以「MS53c65ec22f27f」的id和class「主滑塊」）的<div>的父元素已經被賦予了0。這是一個z-index爲自己和其在白色導航欄下方的子元素已被賦予z-index爲1.

因爲Parent元素設置在導航之後，所以父元素內的任何內容都在單獨的圖層上，而不管z-index是什麼。

我不認爲有一個與CSS修復此的簡單方法。您需要從父元素中刪除z-index，否則請給它與導航相同或更高的值。

理想情況下，我認爲你需要稍微重新排序html。

這是一個理想的設置，我覺得你在追求效果。

HTML的非常基本的設置：

<div id="body"> 
    <div id="nav">nav</div> 
    <div id="slide"> 
     <div id="title"></div> 
     <div id="image"></div> 
    </div> 
</div>

而這裏的哪個位置只有z-index子元素的CSS。

#body{ 
    height:300px; 
    width:100%; 
} 

#nav{ 
    background-color:#eee; 
    height:30px; 
    width:100%; 
    z-index:1; 
    position:absolute; 
    top:0; 
    left:0; 
} 

#slide{ 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
} 

#title{ 
    background-color:#900; 
    height:80px; 
    width:80px; 
    position:absolute; 
    top:0; 
    right:30px; 
    z-index:2; 
} 

#image{ 
    background-color:#999; 
    height:100%; 
    width:100%; 
    z-index:0; 
}

這裏是示出一般的想法一個小提琴：http://jsfiddle.net/Vcb2N/1/

由於#slide元件沒有給出的z索引，子元素保留在相同的層中#nav元件。

來源

2014-07-16 11:27:35 AndrewPolland

是的，我認爲可能是這種情況。不幸的是，滑塊插件會在該位置輸出圖像和滑塊，我只能在其周圍插入我的代碼。如果我破解了插件，我將失去將來更新它的能力。我希望能夠用CSS修復這個問題，如果代碼有點冗長的話。 –

@AdamKwiatkowski嗯，認爲可能是你的問題，我想你可能會被這個問題困住，但當我有機會的時候，我會再看一次。 – AndrewPolland

我有同樣的問題。我通過查看幻燈片點是如何可見的來解決這個問題。解決方法是設置z-index> = 1並將可見性CSS屬性設置爲可見。

element { 
    z-index: 1; 
    visibility: visible; 
}

來源

2015-08-17 10:07:05 GuillaumeP

的z-index使用滑塊模塊

回答

相關問題