शीर्ष दाएं कोने में एक छवि रखना - सीएसएस

Question

मुझे एक div के शीर्ष-दाएं कोने पर एक छवि प्रदर्शित करने की आवश्यकता है (छवि एक "विकर्ण" रिबन) है, लेकिन वर्तमान पाठ को एक आंतरिक div में समाहित रखना, जैसे कि इसके शीर्ष पर अटक जाना।

मैंने अलग-अलग चीजों की कोशिश की जैसे कि किसी अन्य div में छवि को शामिल करना या उसकी कक्षा को परिभाषित करना जैसे:

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

लेकिन किसी भी भाग्य के बिना। मुझे मिला सबसे अच्छा परिणाम छवि के समान ऊंचाई के लिए नीचे स्क्रॉल किए गए सभी पाठ थे।

कोई उपाय?

Comments

अनुशंसित पढ़ने: एएलए: सीएसएस पोजिशनिंग 101 और एएलए: सीएसएस फ्लोट 101 ।

— jensgram

Answer 1

आप इसे इस तरह से कर सकते हैं:

#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>

Answer 2

divअपेक्षाकृत स्थिति में , और रिबन को इसके अंदर बिल्कुल स्थिति दें। कुछ इस तरह:

#content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}

Answer 3

उसी समस्या को देखते हुए, मुझे एक उदाहरण मिला

<style type="text/css">
#topright {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(TRbanner.gif) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}
</style>

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

यहाँ ट्रिक एक छोटा सा बनाने के लिए है, (मैंने GIMP का इस्तेमाल किया) एक PNG (या GIF) जिसमें पारदर्शी बैकग्राउंड है, (और उसके बाद नीचे के कोने को हटा दें।)