將圖像放置在右上角 - CSS

我需要在div的右上角顯示圖像（圖像是「對角線」功能區），但保留當前文本包含在內部div中，在它的頂部就像現在一樣。將圖像放置在右上角 - CSS

我嘗試不同的東西，包括在另一個DIV圖像或定義喜歡它的類：

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

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

，但沒有任何運氣。我得到的最好結果是所有文字向下滾動以獲得圖像的相同高度尺寸。

有什麼想法？

來源

2011-09-02 Randomize

推薦閱讀：* [ALA：CSS Positioning 101]（http://www.alistapart.com/articles/css-positioning-101/）*和* [ALA：CSS Floats 101]（http://www.alistapart.com/articles/css-floats-101/）*。 – jensgram

@jensgram兩個鏈接都很棒:) – hqt

159

你可以做這樣的：

#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>

來源

2011-09-02 10:36:38

位置div比較，和色帶絕對定位裏面。喜歡的東西：

#content { 
    position:relative; 
} 

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

來源

2011-09-02 10:38:12

stackoverflow來拯救！謝謝！ –

這是美麗。謝謝你加里。 – suresh

注視同樣的問題，我發現了一個例子

<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），有一個透明的背景，（然後只刪除相反的底角）。

來源

2013-01-05 21:20:44

將圖像放置在右上角 - CSS

回答

相關問題