बूटस्ट्रैप ड्रॉपडाउन मेनू अन्य तत्वों के पीछे प्रदर्शित होने - IE7

Question

मैं बूटस्ट्रैप 2.3.1 http://twitter.github.io/bootstrap/index.html

उपयोग कर रहा हूँ तो मैं उनके 'ड्रॉपडाउन-मेनू' वर्ग के लिए कुछ सरल त्वरित उपयोग ड्रॉपडाउन मेनू बनाने के लिए उपयोग कर रहा हूँ, लेकिन किसी कारण से आईई 7 पर वे मेरी साइट पर टेक्स्ट और अन्य तत्वों के पीछे दिखाई दे रहे हैं।

टेस्ट लिंक:http://leongaban.com/_projects/defakto/CDS/

मैं अपने सीएसएस करने के लिए z- सूचकांक जोड़ा है, लेकिन अभी भी कुछ भी करने को नहीं लगता है, कृपया मदद!

.header .header-nav ul#nav-account ul.dropdown-menu, 
.header .header-nav ul#nav-library ul.dropdown-menu { 
    z-index: 10000; 
} 

IE9, क्रोम, एफएफ और अन्य आधुनिक कोई सिरदर्द ब्राउज़रों:

---

IE7> :(

एचटीएमएल

<div class="header-nav"> 

<ul id="nav-account" role="navigation" class="pull-right"> 

    <!-- Language Dropdown Button --> 
    <li id="language-btn"> 
     <a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a> 
     <img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>--> 

     <!-- Language Dropdown Menu--> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li> 
     </ul> 
    </li> 

    <!-- User Dropdown Button --> 
    <li id="account-btn"> 
     <a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Logout</a> 
     <img src="img/header-small-down-arrow.png" alt="grey triangle"/> 
     <!-- <span class="grey_triangle"></span> --> 

     <!-- User Dropdown Menu--> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Logout</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li> 
     </ul> 
    </li> 
</ul> 

Answer 1

यह एक stacking context मुद्दा!

भले ही आप ड्रॉपडाउन पर z-index का उपयोग कर रहे हों, यह केवल उसी स्टैकिंग संदर्भ में तत्वों के सापेक्ष है। इसे काम करने के लिए आपको z-index और position को मूल तत्व में जोड़ने की आवश्यकता है। इस मामले में मैं header-topdiv

Answer 2

आप केवल कर सकते हैं हमें ई z-index तैनात तत्वों पर (सापेक्ष, फिक्स्ड/पूर्ण), तो जोड़ने का प्रयास करें:

.header .header-nav ul#nav-account ul.dropdown-menu, 
.header .header-nav ul#nav-library ul.dropdown-menu { 
    position: relative; 
    z-index: 10000; 
} 

Answer 3

UI-Bootstrap lib के नवीनतम संस्करण पर "append-to vs. append-to-body vs. inline example" देखें।

Answer 4

यदि पैरेंट तत्व (जैसे अन्य उत्तरों में उल्लिखित) के जेड-इंडेक्स में वृद्धि आपके लिए काम नहीं करती है, तो यह हो सकता है कि मूल तत्वों में से एक "ओवरफ़्लो: छुपा;" इसे हटाने का प्रयास करें और देखें कि यह काम करता है या नहीं।

Answer 5

बस उत्तराधिकारी या दृश्यमान के रूप में अतिप्रवाह करें।

इससे समस्या हल हो जाएगी।

overflow: visible !important;

यह अद्भुत रूप से मेरे लिए काम किया

Answer 6

मैं था जब

overflow-x: hidden; 

का उपयोग कर पेरेंट तत्व पर एक ही बात होती हैं। इसे बंद करना पड़ा।