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并交换图像和内部div的位置。

DEMO

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>​