मैं इसे सबसे आसान तरीके से समझाने की कोशिश करूंगा। मैं एक "ग्रैंड पैरेंट" तत्व चाहता हूं जो 100vh ऊंचाई लेता है, और व्यूपोर्ट की 100% चौड़ाई, एक सेक्शन की तरह कुछ लेता है, और अंदर एक मूल तत्व होगा जिसमें एक बाल तत्व होगा जिसमें पूर्ण स्थिति होगी।

<body>

  <div class="container">
    <div class="parentElement">
      <div class="ChildrenElement">
      
      </div>
    </div>
  </div>

</body>

स्टाइलिंग:

<style>
    .container {
      background-color:black;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    
    .parentElement {
      position:relative;
      background-color:blue;
      width: 800px;
      height: 200px;
    }
    
    .ChildrenElement {
      position:absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,192,203, 0.5);
      transform: translate(10%);
    }
</style>

उत्पादन:

Output

लेकिन मैं यह कुछ ऐसा होना चाहूंगा:

Expected

लाल बॉक्स बच्चों के तत्व का प्रतिनिधित्व करता है, और यदि यह पैरेंट तत्व से दूर जाता है, तो यह काली पृष्ठभूमि के पीछे होना चाहिए

कोड:

https://jsbin.com/pemasacazi/edit?html

0
thestuckboy 18 अक्टूबर 2021, 06:39
क्या आपने जेड-इंडेक्स का उपयोग करने का प्रयास किया था?
 – 
Code Fingers
18 अक्टूबर 2021, 06:41

2 जवाब

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

मेरा मानना ​​है कि आप oveflow:hidden (https:// ढूंढ रहे हैं Developer.mozilla.org/en-US/docs/Web/CSS/overflow)।

    .container {
      background-color:black;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    
    .parentElement {
      position:relative;
      background-color:blue;
      width: 800px;
      height: 200px;
      max-width: 90%;
      margin: auto;
      overflow:hidden;
    }
    
    .ChildrenElement {
      position:absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,192,203, 0.5);
      transform: translate(10%);
    }
<!DOCTYPE html>

<body>
  <div class="container">
    <div class="parentElement">
      <div class="ChildrenElement">
      
      </div>
    </div>
  </div>
  
  </body>
0
Swimmer F 18 अक्टूबर 2021, 06:46
यह वही है जो मैं ढूंढ रहा था <3। यह नहीं जानने के लिए खेद है।
 – 
thestuckboy
18 अक्टूबर 2021, 07:00
पछताओ मत। हर कोई कहीं न कहीं शुरुआत करता है। मुझे खुशी है कि मुझसे मदद हो सकी।
 – 
Swimmer F
18 अक्टूबर 2021, 11:59

यहां समस्या यह है कि एचटीएमएल हमेशा मूल तत्वों को बच्चों के तत्वों के पीछे रखता है ताकि वे दिखाई दे सकें। हम इसे केवल माता-पिता और बच्चों के तत्वों की कक्षाओं की अदला-बदली करके बदल सकते हैं:

.container {
  background-color: black;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parentElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 192, 203, 0.5);
  transform: translate(10%);
}

.ChildrenElement {
  position: relative;
  background-color: blue;
  width: 800px;
  height: 200px;
}
<body>

  <div class="container">
    <div class="ChildrenElement">
      <div class="parentElement">

      </div>
    </div>
  </div>

</body>

अब भले ही तत्वों की स्थिति बदल गई हो, मुझे कोई अंतर नहीं दिख रहा है। कृपया टिप्पणी करें कि क्या यह काम करेगा।

0
Code Fingers 18 अक्टूबर 2021, 06:48