html - 隐藏在图像后面的 div 标签

Question

我有一个问题，应该在悬停时显示的 div 标签隐藏在图像后面。这是它的外观：

我试图用 jsfiddle 重新制作它：http: //jsfiddle.net/Gwxyk/21/ 我也在“.image-options”上尝试了相对位置，但结果不正确。另外，我如何将橙色的小盒子浮动到右侧？我试过浮动：对；但它没有回应。

会得到帮助。

一些任意代码，因为stackoverflow要求它（它在jsfiddle中）：

.image-options { 
float: right;

}

Answer 1

我很难准确地理解你需要发生什么。但是，您是否尝试过使用 z-index 属性？div 和图像都需要相对或绝对定位，然后对要出现在前面的元素应用更高的 z-index。因此，您可以将 z-index: 1 应用于图像并将 z-index: 100 应用于 div。

Answer 2

这是你所期待的吗？

添加top:0和.image-options交换image和inner div的位置。

演示

Answer 3

给你，我想这会帮助你。

http://jsfiddle.net/dmP2x/

你不必用 jQuery 来做这件事，尽可能多地使用 CSS 来整理你的代码。

CSS：

 .testclass {
    width: 105px;
    height: 80px;
    overflow: hidden;
    display: inline-block;
    border: 2px solid rgba(140,140,140,1);
}

.image-options {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,128,64,1);
    position: absolute;
    top: 10px;
    left: 25px;
    overflow: none;
    display: none;
}
.image {
    background-image: url('http://www.placehold.it/105X80');
    width: 105px;
    height: 80px;
    position: relative;
}
.image:hover .image-options {
    display: block;
}

html:

<div class="testclass">
    <div class="image">
        <div class="image-options"></div>
    </div>
</div>​