Question

查看网站wplayout.com。在主页上我有一个画廊。我想在主页库中显示的每个图像的顶部放置一个“高级”标签图像。目前，优质图像显示在主页的右上角。怎么实现呢？

到目前为止我已经

了

.ribbon {
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: absolute;
top: -3px;
right: -3px;
z-index:500;
display: block;
}

并在html中我有

<span class="ribbon"></span>

提前致谢

Answer 1

确保包含'premium'图片的div设置了position: relative，如下所示：

标记：

<div class="my-image">
  <img src="whatevs.jpg">
  <span class="ribbon"></span>
</div>

CSS：

.my-image {
  position: relative;
}

具有绝对定位的Div（您的功能区）相对于具有position: relative的第一个父项定位，或者如果不存在此类父项，则相对于主体定位。

Answer 2

我认为位置：relative必须应用于功能区而不是容器div。试试

.ribbon 
{
   background: url("images/premium.png") no-repeat top right;
   width: 100px;
   height: 102px;
   overflow: hidden;
   /*text-indent: -9000px;*/
   position: relative; /*changed*/
   right: -204px;  /*changed*/
   top: -230px;  /*changed*/
   z-index:500;
   display: block;
}

尝试使用firebug＆amp;有效。希望它适合你。

Answer 3

使用css中的z-index选择器

要为您的高级内容添加z-index:999;，请在下方图片中使用z-index:0;

如何在HTML中将图像放在另一个图像的顶部？

3 个答案: