अतिप्रवाह ओवरराइड: जेड-इंडेक्स

के साथ छिपा हुआ coda_bubble jquery प्लगइन का उपयोग कर रहा हूं, और मुझे अपने बबल को ओवरफ्लो छुपा div के अंदर पॉप आउट करने की आवश्यकता है। यहाँ मेरा नमूना कोड है।अतिप्रवाह ओवरराइड: जेड-इंडेक्स

<html> 
<head> 
<title>Override overflow:hidden</title> 
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    opts = { 
     distances : [40,40], 
     leftShifts : [0,0], 
     bubbleTimes : [400,400], 
     hideDelays : [0,0], 
     bubbleWidths : [200,200], 
     bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER", 
     msieFix : true 
    }; 
    $('.coda_bubble').codaBubble(opts); 
}); 
</script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
    } 
#wrapper{ 
    width:300px; 
    margin:200px auto; 
    } 
.overflow{ 
    width:120px; 
    height:80px; 
    overflow:hidden; 
    float:left; 
    } 
.coda_bubble{ 
    z-index:100;/****NOT WORKING*******/ 
    } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="overflow"> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
    <div class="overflow" style="overflow: visible;"> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

स्रोत

2009-12-23 mukamaivan

मुझे लगता है आप .overflow का एक बच्चा होने की .coda_bubble जरूरत नहीं है। यदि नहीं तो इसे बाहर ले जाएं और दोनों बच्चों को पकड़ने के लिए एक स्थिति div बनाओ।

<html> 
<head> 
<title>Override overflow:hidden</title> 
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    opts = { 
     distances : [40,40], 
     leftShifts : [0,0], 
     bubbleTimes : [400,400], 
     hideDelays : [0,0], 
     bubbleWidths : [200,200], 
     bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER", 
     msieFix : true 
    }; 
    $('.coda_bubble').codaBubble(opts); 
}); 
</script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
    } 
#wrapper{ 
    width:300px; 
    margin:200px auto; 
    } 
.overflow{ 
    overflow:hidden; 
    width:120px; 
    height:80px; 
    position:absolute; /*May not be needed.*/ 
    } 
.position { 
    width:120px; 
    height:80px; 
    float:left; 
} 
.coda_bubble{ 
    /*z-index:100;/****NOT WORKING*******/ 
    } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="position"> 
     <div class="overflow"> 
      [overflow content] 
     </div> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 

    <div class="position"> 
     <div class="overflow" style="overflow:"> 
      [overflow content] 
     </div> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

स्रोत

2010-01-06 03:11:21 Byran

Thanx Byran, विचार बहुत अच्छा है, मुझे इसे आज़माएं। – mukamaivan

जेड-इंडेक्स प्रॉपर्टी उन तत्वों पर लागू होती है जिनके पास स्थिति पूर्ण होती है। बजाय इस सीएसएस का प्रयास करें:

.coda_bubble{ 
    position:absolute; 
    z-index:100;/****NOT WORKING*******/ 
}

स्रोत

2009-12-23 12:15:35 Sarfraz

थैंक्स शारफ्राज़, लेकिन फिर भी बुलबुला छुपा हुआ है। । ओवरफ्लो { चौड़ाई: 120 पीएक्स; ऊंचाई: 80 पीएक्स; अतिप्रवाह: छुपा; फ्लोट: बाएं; \t स्थिति: रिश्तेदार; } .coda_bubble { स्थिति: पूर्ण; जेड-इंडेक्स: 100;/**** काम नहीं कर रहा *******/ } – mukamaivan

यह देखने के लिए तत्व से। ओवरफ्लो क्लास को हटा दें कि क्या होता है। – Sarfraz

वह वास्तव में काम करता है लेकिन इसका एक उद्देश्य है, इसलिए मुझे इसकी आवश्यकता है। – mukamaivan

आप नहीं कर सकते। अतिप्रवाह: छुपा; तत्व के बाहर सामग्री छुपाता है। अवधि।

जेड-इंडेक्स किसी और ने जो कहा, उसके बावजूद, पूर्ण और अपेक्षाकृत स्थित तत्वों पर लागू होता है।

संपादित आप उस विशेष div पर कुछ गद्दी-टॉप डाल सकता है अगर आपको लगता है कि गद्दी के साथ रह सकते हैं, कि है। Div को भी थोड़ा बड़ा होना चाहिए।

EDIT 2 जैसा कि अन्य ने कहा है, हालांकि स्थिति: रिश्तेदार; और स्थिति: पूर्ण; शायद अधिक आम हैं, हाँ, जेड-इंडेक्स स्थिति के साथ काम करता है: निश्चित; भी, बस स्थिति के लिए नहीं: स्थैतिक; मैंने उनको अनदेखा किया।

स्रोत

2010-01-12 18:17:47

z-index संपत्ति तत्वों है कि position विकल्प absolute या relative करने के लिए सेट में केवल काम करते हैं।

दूसरे शब्दों में आप हमेशा जरूरत positonz-index के साथ काम करने के लिए।

स्रोत

2011-02-08 18:39:51 Username

मैं खिड़की से ऑफसेट स्थिति की गणना करता हूं, इसे अपने माता-पिता से हटा देता हूं और इसे शरीर से जोड़ता हूं।

उदाहरण के लिए:

var left, top; 
left = jQuery(element).offset().left; 
top = jQuery(element).offset().top; 
jQuery(element) 
    .appendTo('body') 
    .css({ 
    'position': 'absolute', 
    'left': left + 'px', 
    'top': top + 'px' 
    });

स्रोत

2011-04-07 14:08:46

बस एक सुधार: z-indexposition: relative, position:absolute और position:fixed पर लागू होता है। मूल प्रश्न का उत्तर देने के लिए - overflow: hidden तत्व के बच्चे को बनाने के लिए सीएसएस में कोई रास्ता नहीं है, यह मूल सीमाओं के बाहर की सामग्री दिखाता है, आपको पदानुक्रम बदलना होगा।

स्रोत

2011-05-24 15:25:28 mystrdat

यह बहुत बेहतर होगा अगर बच्चों को अपने कुछ फोर्फ़र्स सेटिंग्स को ओवरराइट करना संभव हो, केवल अपने लिए। फिर एक अतिप्रवाह-छिपे हुए div के कुछ बच्चे दिखाई दे सकते हैं (जैसे इसके अंदर तत्वों के रंग), लेकिन बाकी के समान ही रहेगा। यह प्रतिबंध सचमुच डेवलपर्स को अपने समाधान को एक हैक में बदलने के लिए मजबूर करता है। –

एचटीएमएल और सीएसएस के पदानुक्रम इन एंटीपेटर्नों में से कई को मजबूर करता है, यह जटिल लेआउट को इष्टतम तरीके से करने का अनुभव करता है। – mystrdat

अतिप्रवाह ओवरराइड: जेड-इंडेक्स

उत्तर

संबंधित मुद्दे