मेरे पास एक HTML तालिका में छवियों की एक सूची है और प्रत्येक छवि पर एक छोटा आइकन ओवरलैप करने की आवश्यकता है। हम जेड इंडेक्स और पोजिशनिंग का उपयोग करके ऐसा कैसे कर सकते हैं?हम सीएसएस शैली का उपयोग कर दो छवियों को कैसे ओवरलैप कर सकते हैं?
यहाँ देखें के बारे में z- सूचकांक और यहाँ https://developer.mozilla.org/en/understanding_css_z-index
एक लेख का उपयोग कर सकते हैं। http://jsbin.com/univa
<html>
<head>
<style type="text/css">
.under
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
</style>
</head>
<body>
<img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" />
<img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />
</body>
</html>
अच्छा एक पूर्व ... :) –
सीएसएस जादू का उत्कृष्ट टुकड़ा – Cid
आप position:relative का उपयोग कर सकते हैं और right:30px, bottom:30px सेट कर सकते हैं, जो इसे 30 पिक्सल तक ले जाएगा और छोड़ देगा।
सीएसएस:
.icon{
position:relative;
right:30px;
bottom:30px;
}
तत्व आप शीर्ष पर होना चाहता हूँ की जरूरत है एक उच्च z- सूचकांक
है तो छोटे आइकन 2 का z- इंडेक्स होता और छवियों होगा करने के लिए
.icon {
z-index: 2;
position: relative;
left: 30px;
top: 30px;
}
.images {
z-index: 1;
}
यहाँ है: 1
उदाहरण के z- इंडेक्स है एक गाइड के बारे में आप की स्थिति http://www.tizag.com/cssT/position.php
इस मदद हो सकता है पढ़ आप http://stackoverflow.com/questions/4863644/overlap-across-width-of-two-divs – digital