z-index निरपेक्ष स्थिति के साथ काम नहीं कर रहा है

Question

मैंने कंसोल (क्रोम \ फ़ायरफ़ॉक्स) खोला और निम्न लाइनें चलाईं:

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

#PopupContent सब से ऊपर होना चाहिए लेकिन यह #popupFrame अपारदर्शिता से प्रभावित होता है।

सामग्री #popupFrame में सम्‍मिलित नहीं है जो इसे बहुत अजीब बनाती है।

लक्ष्य चेतावनी बॉक्स की तरह फ़ायरफ़ॉक्स बनाना है

Answer 1

दूसरा div है position: static(डिफ़ॉल्ट) इसलिए z- इंडेक्स उस पर लागू नहीं होता है।

आपको स्थिति की आवश्यकता है (स्थिति संपत्ति को इसके अलावा किसी और चीज़ में सेट करें static, आप शायद relativeइस मामले में चाहते हैं ) कुछ भी जिसे आप देना चाहते हैं z-index।

Answer 2

स्थैतिक स्थिति के अनुसार अपारदर्शिता आपके z- इंडेक्स के संदर्भ को बदल देती है। या तो उस तत्व में अपारदर्शिता जोड़ें जो उसके पास नहीं है या उसे उस तत्व से नहीं हटाता है जो करता है। आपको या तो दोनों तत्वों को स्थिर स्थिति में लाना होगा या रिश्तेदार या निरपेक्ष स्थिति को निर्दिष्ट करना होगा। यहाँ संदर्भों पर कुछ पृष्ठभूमि दी गई है: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Comments

वाह। लेख के अनुसार, इसमें अपारदर्शिता शामिल है, "रूपांतर, फिल्टर, सीएसएस-क्षेत्र, पृष्ठांकित मीडिया और संभवतः अन्य।"

— jchook

Answer 3

पुराना सवाल लेकिन यह जवाब किसी की मदद कर सकता है।

यदि आप कंटेनर की सीमाओं के बाहर कंटेनर की सामग्री को प्रदर्शित करने की कोशिश कर रहे हैं, तो सुनिश्चित करें कि यह नहीं है overflow:hidden, अन्यथा इसके बाहर का कुछ भी कट जाएगा।

Answer 4

z-indexकेवल उन तत्वों पर लागू होता है जिन्हें एक स्पष्ट स्थान दिया गया है। position:relative#PopupContent में जोड़ें और आपको जाने के लिए अच्छा होना चाहिए।

Answer 5

उपयोग करते समय मैंने इस मुद्दे का बहुत position: absolute;सामना किया, मैंने position: relativeबाल तत्व में उपयोग करके इस मुद्दे का सामना किया । को बदलने की ज़रूरत नहीं position: absoluteहै relative, बस दो उदाहरणों के नीचे बाल तत्व को जोड़ने की आवश्यकता है:

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

यह कैसे स्थिति रिश्तेदार का उपयोग कर तय किया जा सकता है:

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
  
  // Just add position relative;
  position: relative;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

यहां सैंडबॉक्स