定位在包含的html文件上的圖像

我試圖將圖像固定在某些包含內容的右上角。定位在包含的html文件上的圖像

<div class="panel-body helpContent"> 
    <img src="/images/myImage.png" class="beta" /> 
    <jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" /> 
</div>

該圖像只是一個小角落裏的小徽章，大約150px x 150px。

貝塔類看起來是這樣的：

.beta{ 
    position:absolute; 
    top:0px; 
    right:15px;}

的問題是，像坐在中的一些HTML文件的內容之上。不是所有的人都介意你。但是那些頭頂很長的標題。

我想要的是HTML內容包裝，所以它沒有打它。如果將圖像包含在每個HTML文件中，我可以這樣做，但如果可能的話，我寧願只包含一次。

是否有創意的解決方案，這不需要每個頁面上的圖像？

感謝您的任何有用的提示。

來源

2015-02-24 fumeng

使用'位置：相對;在容器上'你想 – Brewal 2015-02-24 16:27:48

@Brewal的位置是：絕對的將是罰款的形象，以質量％和'最大寬度容器的使用寬度：90％'或近 - 關於你的容器 – 2015-02-24 16:32:16

@SachinKanungo我不是在說圖像 – Brewal 2015-02-24 16:38:15

您是否嘗試過浮吧？

<div class="panel-body helpContent"> 
    <img src="/images/myImage.png" class="beta" /> 
    <jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" /> 
    <div class="clear"> </div> 
</div> 

.beta { 
    float:right; 
} 

.clear { 
    clear: both; 
}

來源

2015-02-24 16:38:31

這非常接近，但現在圖像並未100％固定在右側;似乎在頂部和右側有一些填充。 – fumeng 2015-02-24 16:57:34

忘記吧，我的壞。奇蹟般有效。 – fumeng 2015-02-24 17:00:44

感謝您的支持:) – 2015-02-24 17:01:02

試試這個

<div class="panel-body helpContent"> 
    <jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" /> 
    <img src="/images/myImage.png" class="beta" /> 
</div>

和

.beta{ 
    position:absolute; 
    top:0px; 
    z-index: 1000; 
    right:15px;}

來源

2015-02-24 16:27:41 DevManny

這仍然保持它重疊的內容;您將z-index設置爲最頂層。 – fumeng 2015-02-24 16:56:08

定位在包含的html文件上的圖像

回答

相關問題