सीमाओं पर जेड-इंडेक्स

Question

मैं सीमाओं में जेड-इंडेक्स जोड़ने के लिए चारों ओर खोज रहा हूं लेकिन मुझे ऐसा नहीं लगता है इसलिए मैंने सोचा कि मैं यहां पूछूंगा।

कहें कि मेरे पास एक मूल div के साथ div है। माता-पिता की सीमा है और मैं चाहता हूं कि वह सीमा बाल div को ओवरलैप करे, लेकिन मैं नहीं चाहता कि माता-पिता इसे ओवरलैप करें।

Answer 1

आप सीमा के साथ ऐसा नहीं कर सकते हैं।

दिलचस्प बात यह है, हालांकि, आप इसके साथ एक outline

* { 
 
box-sizing: border-box; 
 
} 
 

 
.parent { 
 
width: 200px; 
 
height: 200px; 
 
margin: 25px auto; 
 
position: relative; 
 
background: #bada55; 
 
border:12px solid #663399; 
 
outline: 12px solid red; 
 
padding:25px 
 
} 
 

 
.child { 
 
width: 220px; 
 
height: 100px; 
 
background: lightblue; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

अन्य विकल्प

कर सकते हैं छद्म तत्वों

का उपयोग करना 1. छद्म-तत्व सीमा

कुछ अतिरिक्त परिवर्तनों को जगह में घुसने की आवश्यकता है।

* { 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 25px auto; 
 
    position: relative; 
 
    background: #bada55; 
 
    padding: 25px; 
 
} 
 
.child { 
 
    width: 220px; 
 
    height: 100px; 
 
    background: lightblue; 
 
} 
 
.absolute::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 12px solid red; 
 
}

<div class="parent absolute"> 
 
    <div class="child"></div> 
 
</div>

2. छद्म तत्व बॉक्स छाया के साथ

* { 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 25px auto; 
 
    position: relative; 
 
    background: #bada55; 
 
    padding: 25px; 
 
} 
 
.child { 
 
    width: 220px; 
 
    height: 100px; 
 
    background: lightblue; 
 
} 
 
.shadow::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 0%; 
 
    width: 100%; 
 
    height: 100%; 
 
    box-shadow: 0 0 0 12px red; 
 
}

<div class="parent shadow"> 
 
    <div class="child"></div> 
 
</div>