0

I need to put an icon on top of an image of the product. I have been working on this for quite a while. What am I missing?

.special-corner is a div with the icon as the background image, which needs to display on top of the img.

<div class="vertical-vehicle-spotlight-item">
  <div class="vertical-item-photo">
    <a href="#">
      <div class="special-corner">
        <img width="260" height="146" src="kjhasd.png">

.vertical-vehicle-spotlight-item {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    cursor: pointer !important;
    height: 253px;
    margin-left: 3px;
    margin-top: 17px;
    overflow: hidden;
    padding: 5px;
    width: 260px;
}

.vertical-item-photo {
    height: 146px;
    overflow: hidden;
    vertical-align: middle;
    width: 260px;
}

.special-corner {
    background-image: url("/img/special-corner.png");
    background-position: 100% -1px;
    background-repeat: no-repeat;
    height: 100px;
}

.vertical-item-photo img {
    height: 146px;
    vertical-align: middle;
    width: 260px;
}

Edit: Here's the fiddle, thanks for the idea from @Mooseman. http://jsfiddle.net/heetertc/nTMun/

4

3 回答 3

2

Use z-index: 1 on the image and z-index: 2 on .special-corner.

于 2013-04-08T15:09:07.713 回答
1

您需要添加除静态（初始值）以外的位置属性，z-index 才能正常工作。你可以给.special-cornerposition: relative 然后给它一个正的 z-index 让它覆盖图像。

于 2013-04-08T15:11:55.007 回答
0

Use z-index to enforce elements "depth". Like lower on image and higher on your .special-corner

于 2013-04-08T15:10:00.187 回答