CSS मैं एक div सब कुछ के शीर्ष पर होना चाहता हूँ

Question

मैं सब कुछ शीर्ष पर रहने के लिए एक html div टैग कैसे बनाऊं?

Comments

यह भी देखें stackoverflow.com/q/2006134/32453

— rogerdpack

Answer 1

Z- इंडेक्स को काम करने के लिए, आपको तत्व को एक position:absoluteया एक position:relativeसंपत्ति देने की आवश्यकता होगी । एक बार जब आप ऐसा करते हैं, तो आपके लिंक ठीक से काम करेंगे, हालांकि आपको अपने सीएसएस को बाद में थोड़ा मोड़ना पड़ सकता है।

Comments

मैं एक निश्चित योजना का उपयोग करना चाहता था और इसलिए मैंने स्थिति को नियत रखा लेकिन फिर भी z- इंडेक्स को १००० पर सेट किया और वांछित परिणाम प्राप्त किए, इसने पृष्ठ पर एक div निचला हिस्सा कवर किया जैसा कि मैंने स्क्रॉल किया, क्या आप बता सकते हैं कि ऐसा क्यों हुआ मैं एक स्थिर स्थिति का उपयोग कर रहा था?

— 1589 में Boo89100

Answer 2

के लिए z-index:1000एक प्रभाव है कि आप एक गैर स्थिर स्थिति योजना की जरूरत है।

position:relative;आप जिस तत्व को शीर्ष पर रखना चाहते हैं उसका चयन करते हुए एक नियम में जोड़ें

Answer 3

हां, जेड-इंडेक्स को काम करने के लिए, आपको तत्व को एक स्थिति देने की आवश्यकता होगी: पूर्ण या एक स्थिति: सापेक्ष संपत्ति।

लेकिन ... माता-पिता पर ध्यान दें!

आपको यह देखने के लिए तत्वों के नोड्स ऊपर जाना होगा कि क्या आम माता-पिता के स्तर पर पहले वंशज के पास एक परिभाषित जेड-इंडेक्स है।

अन्य सभी वंशज कभी भी अग्रभूमि में नहीं हो सकते हैं यदि आधार पर कम निश्चित जेड-इंडेक्स है।

इस स्निपेट उदाहरण में, div1-2-1 का 1000 का z-index है, लेकिन फिर भी div1-1-1 के अंतर्गत है, जिसमें 3 का z-index है।

ऐसा इसलिए है क्योंकि div1-1 में z1-index div1-2 से अधिक है।

.div {
  
}

#div1 {
  z-index: 1;
  position: absolute;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#div1-1 {
  z-index: 2;
  position: absolute;
  left: 230px;
  width: 200px;
  height: 200px;
  top: 31px;
  background-color: indianred;
}

#div1-1-1 {
  z-index: 3;
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}

#div1-2 {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 80px;
  top: 5px;
  background-color: red;
}

#div1-2-1 {
  z-index: 1000;
  position: absolute;
  left: 70px;
  width: 120px;
  height: 100px;
  top: 10px;
  color: red;
  background-color: lightyellow;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.rotate {
  writing-mode: vertical-rl;
  padding-left: 50px;
  font-weight: bold;
  font-size: 20px;
}

<div class="div" id="div1">div1</br>z-index: 1
  <div class="div" id="div1-1">div1-1</br>z-index: 2
    <div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
  </div>
  
  <div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
    <div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br>   parent)</span></div>
  </div>
</div>

Comments

आप एक जीवन रक्षक है!

— बेंजामिन कारलोग

Answer 4

आपको position:relative;मेनू में जोड़ने की आवश्यकता है । Z- इंडेक्स केवल तब काम करता है जब आपके पास नॉन स्टैटिक पोजिशनिंग स्कीम हो।

Answer 5

z-indexसंपत्ति आपको अपने नियंत्रण को आगे ले जाने में सक्षम बनाती है। जितनी बड़ी संख्या आप अपने तत्व को प्राप्त करते हैं उतना ही ऊपरी सेट करते हैं।

positionसंपत्ति होनी चाहिए relativeक्योंकि html-elementसभी आयामों में अन्य नियंत्रणों के मुकाबले स्थिति अपेक्षाकृत अपेक्षाकृत होनी चाहिए।

element.style {
   position:relative;
   z-index:1000; //change your number as per elements lies on your page.
}

Answer 6

मुझे लगता है कि आप WW3 स्कूल से कोड के साथ एक पॉपअप बना रहे हैं, सही है? इसकी जांच सी.एस.एस. .Modal एक, वहाँ पहले से ही शब्द z-indexहैं। बस 1 से 100 तक बदल दें।

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}