मेरे पास सामग्री के साथ किसी अन्य div के शीर्ष पर पृष्ठभूमि-रंग सेट ओवरलेइंग के साथ 2 div तत्व हैं। केस -1 में ओवरले कंटेंट डिव का भाई नहीं है, इसलिए यह बैकग्राउंड टेक्स्ट को यूजर को देखने की अनुमति देता है। केस-2 में ओवरले कंटेंट डिव का भाई है, इसलिए यह यूजर को टेक्स्ट नहीं दिखा रहा है।

मामला एक

<div class="overlay"></div>
<div class="example-container">
  <div class="child1">
    Case 1 - Sample Text 1
  </div>
</div>

केस-2

<div class="child1">
  Case 2 - Sample text 2
</div>
 <div class="overlay">
 </div>

2 परिदृश्यों का अनुकरण करने के लिए नमूना JSfiddle।

कोई विचार क्यों एचटीएमएल में यह व्यवहार? हम पृष्ठभूमि रंग (केस -2) के साथ ओवरले div को हमेशा टेक्स्ट पारदर्शिता की अनुमति कैसे दे सकते हैं।

0
Praveen.R 21 नवम्बर 2021, 04:08
बस position:relative को .child1 पर जोड़ें और overlay को child1 से पहले रखें या z-index: 1 को child1 पर सेट करें।
 – 
Cornel Raiu
21 नवम्बर 2021, 04:16
क्या इससे आपके सवाल का जवाब मिलता है? सापेक्ष स्थिति के साथ z-index का उपयोग कैसे करें? या < a href="https://stackoverflow.com/questions/44597709/css-absolute-positioning-z-index">यह
 – 
Cornel Raiu
21 नवम्बर 2021, 04:17

1 उत्तर

सबसे बढ़िया उत्तर

यहाँ मुद्दा यह है कि पाठ पर div का प्रतिपादन किया जा रहा है। इसे ओवरले को -1 की z-index प्रॉपर्टी देकर आसानी से ठीक किया जा सकता है। यह div को टेक्स्ट के नीचे प्रस्तुत करता है, जिससे आप इसे देख सकते हैं।

उदाहरण ओवरले सीएसएस

.overlay {
    position: absolute; 
    background-color: gray;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
    z-index: -1;
  }

वैकल्पिक रूप से चूंकि आप इसे ओवरले करना चाहते हैं (यदि आप वास्तव में ऐसा नहीं करते हैं तो यह एक बहुत ही भ्रामक नाम है) बस अस्पष्टता को कम करें

.overlay {
    position: absolute; 
    background-color: gray;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
    opacity: 0.5;
  }
 
0
Big Dumb 21 नवम्बर 2021, 04:15
धन्यवाद बिग डंप। इससे मामला सुलझ गया।
 – 
Praveen.R
21 नवम्बर 2021, 04:29