रिश्तेदार स्थिति के साथ जेड-इंडेक्स का उपयोग कैसे करें?

Question

मुझे जेड-इंडेक्स और मेरे कोड के साथ एक गंभीर समस्या है। मैं हर पंक्ति पर एक पॉपअप रखना चाहता हूं और उस पंक्ति के सापेक्ष स्थित हूं। तो मैं इस कोड बनाया:

<div class="level1"> 
    <div class="level2"> 
     <input type="text" value="test1" /> 
     <div class="popup">test1</div> 
    </div> 
    <div class="level2"> 
     <input type="text" value="test2" /> 
     <div class="popup">test2</div> 
    </div> 
</div> 

ते निम्नलिखित शैली

.level1 
{ 
    position:relative; 
    z-index:2; 
} 
.level2 
{ 
    position:relative; 
    z-index:3; 
} 
.popup 
{ 
    position:absolute; 
    left:0px; 
    top:10px; 
    width:100px; 
    height:100px; 
    background:yellow; 
    z-index:4; 
} 

मैं जानता हूँ कि मैं कुछ बहुत गलत कर रहा हूँ के साथ है, लेकिन मैं अपनी मूर्खता नहीं मिल रहा है।

Answer 1

जब आप किसी तत्व पर position: relative सेट करते हैं तो आप एक नया युक्त ब्लॉक स्थापित करते हैं। उस ब्लॉक के अंदर सभी पोजिशनिंग इसके संबंध में है।

उस ब्लॉक के अंदर किसी तत्व पर जेड-इंडेक्स सेट करना केवल उसी परत के अंदर अन्य तत्वों के संबंध में अपनी परत को बदल देगा।

मुझे किसी भी काम-आसपास के बारे में पता नहीं है।

Answer 2

relative स्थिति के साथ आप z-index का उपयोग कर सकते हैं। आपको बस position: relative निर्दिष्ट करने की आवश्यकता है। क्या तुम सच में ऐसा लगता है कि ऊपर पॉपिंग है यह देखने के लिए चाहते हैं, मैं उपयोग करने का सुझाव box-shadow

.popup { 
    position:relative; 
    left: 0px; 
    top: 10px; 
    width: 100px; 
    height: 100px; 
    background:yellow; 
    z-index: 4; 

    -webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
    -moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
    -ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
    -o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
    box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6); 
} 

Answer 3

वापस divs