定位在包含的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文件上的图像

回答

相关问题