Question

我正在尝试将图片固定在右上角的某些内容中。

<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类看起来像这样：

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

问题是图像位于某些HTML文件的内容之上。不是所有人，请注意。但是那些头顶很长的人。

我喜欢的是html内容包装，所以它没有打到它。如果我将图像包含在每个HTML文件中，我就可以这样做，但是如果可能的话，我只想包含一次。

是否有创意解决方案，并不需要每页上的图像？

感谢任何有用的提示。

Answer 1

你试过漂浮吗？

<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;
}

Answer 2

试试这个

<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;}

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

2 个答案: