जब पूर्ण स्थिति वाला div जोड़ा जाता है तो लिंक

Question

पर क्लिक नहीं कर सकता है मेरे पास एक पृष्ठ और div पर मेनू है जो पूर्ण स्थान पर है। समस्या यह है कि जब यह div किसी पृष्ठ पर होता है, तो मैं मेनू आइटम में किसी भी लिंक पर क्लिक नहीं कर सकता।

जब मैं इस div (#left_border) को हटा देता हूं, तो लिंक फिर से क्लिक करने योग्य होते हैं।

क्यों?

सीएसएस:

#left_border { 
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    width: 1094px; 
    background-size: 100% auto; 
    position: absolute; 
    height: 850px; 
    left: -51px; 
    top: 0px; 
} 

HTML:

<div id="wrapper"> 
<div id="content"> 
    <div id="left_border"></div> 
    <div id="left"> 
     <div id="menu"> 
      <ul class="menu"> 
       <li class="item-101 current active deeper parent"><a href="/">Home</a> 

        <ul> 
         <li class="item-107"><a href="/index.php/home/news">News</a> 

         </li> 
        </ul> 
       </li> 
       <li class="item-102 deeper parent"><a href="/index.php/merchants-shops">Merchants/Shops</a> 
       </li>      
      </ul> 
     </div> 
    </div>  
</div> 

यहाँ आप देखते हैं, कि आप मेनू आइटम पर क्लिक नहीं कर सकते हैं: http://jsfiddle.net/Dq6F4/

Answer 1

जोड़े position:relative को #menu

#menu 
{ 
    position:relative; 
} 

JS Fiddle Demo

Answer 2

उपयोग गूगल क्रोम या मोज़िला फ़ायरफ़ॉक्स के डेवलपर टूल आपके लिंक और divs पर होवर करने (या उन्हें चुनें)। इस तरह आप देख सकते हैं कि क्या हो रहा है, और संभवतः, आपके लिंक के शीर्ष पर एक और div या अन्य ऑब्जेक्ट स्टैक्ड किया गया है, जो आपको क्लिक करने से रोक रहा है।

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view 

Answer 3

जोड़ें z-index:-1; इस लिंक को क्लिक करने की अनुमति देगा: फ़ायरफ़ॉक्स भी एक 3 डी विकल्प है, जो यह सब और भी बेहतर की परिकल्पना करती है। चूंकि Div पूरी तरह से लिंक पर स्थित है और इसलिए यह क्लिक करने योग्यता की अनुमति नहीं दे रहा है।

#left_border { 
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    width: 1094px; 
    background-size: 100% auto; 
    position: absolute; 
    height: 850px; 
    left: -51px; 
    top: 0px; 
    z-index:-1; 
} 

इसके लिए Working Solution है।

उम्मीद है कि यह मदद करता है।

Answer 4

.. आप z- सूचकांक के साथ एक समस्या है

यह मेनू तत्वों को कवर किया जाता है:

#left_border { 
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    width: 1094px; 
    background-size: 100% auto; 
    position: absolute; 
    height: 850px; 
    left: -51px; 
    top: 0px; 
    z-index:-111; 
} 

http://jsfiddle.net/Dq6F4/2/

Answer 5

आपकी समस्या ओवरले के रूप में लिंक को कवर #left_border साथ वास्तव में है। इसकी चौड़ाई सीमित करें .. उदा।

#left_border{ 
    width:50px; 
} 

Answer 6

मैं एक बहुत ही सरल उपाय है कि काम करता है मिल गया! मैं एक प्रतिशत यह pixels- में था और एक मार्जिन-बाएँ pixels.And में है कि एक आकर्षण की तरह काम किया जोड़ा के लिए छोड़ दिया सेट !! http://2letscode.blogspot.com/2014/07/links-not-clickable-when-inside.html

Answer 7

#left_border सीएसएस वर्ग निम्नलिखित बयान में जोड़ने के लिए क्लिक करने अनब्लॉक करने के लिए:

सीएसएस

pointer-events: none 

(यह शामिल है पार ब्राउज़र समाधान> = IE11)

साथ इस समाधान का Here is source अधिक जानकारियां। मैंने क्रोम, फ़ायरफ़ॉक्स और सफारी (मैकोज़ और आईओएस) पर काम किया और काम करता है :)