div標籤隱藏在圖像後面

我有一個問題，應該顯示在懸停上的div標籤隱藏在圖像後面。這是它的外觀：div標籤隱藏在圖像後面

enter image description here

我試着用的jsfiddle來改造它：http://jsfiddle.net/Gwxyk/21/ 我想也對」圖像配選項的相對位置，但並沒有變成正確的。另外我如何將小橙盒漂浮在右側？我試過float：right;但它沒有迴應。

幫助將被認可。

因爲計算器一些任意代碼需要它（其的jsfiddle）：

.image-options { 
float: right;

}

來源

2012-10-31 user1683645

林不知道你想最終的結果是什麼？絕對位置需要x和y位置，如top：0px;右：0像素;而父div需要位置：相對的，所以小盒子不會遍佈整個地方。但是，如果你可以很清楚地分辨出你的想法，這將會有所幫助。 – BennyLava

小型橙色盒子因爲隱藏在圖像後面而未懸停顯示。 – user1683645

我可以從小提琴中看到，您還沒有正確關閉您的div。看這裏。我已經改變了你的一些CSS，並結束了你的div。 [鏈接]（http://jsfiddle.net/Gwxyk/32/） – BennyLava

我掙扎準確地瞭解你需要對發生的事情。但是你有沒有嘗試過使用z-index屬性？ div和圖像都需要相對或絕對定位，然後對要顯示在前面的元素應用更高的z-index。因此，您可以將z-index：1應用於圖像，將z-index：100應用於div。

來源

2012-10-31 10:24:15

這給了一些令人滿意的結果。我在圖像上方顯示了一個小橙盒。但是，通過單擊小橙色框生成的下拉列表僅限於父div。也許我應該嘗試親戚。另外我怎樣才能將橙色盒子漂浮在右上角？ – user1683645

set right：0px;和top：0px; – BennyLava

關於下拉菜單，可以嘗試給父div溢出：可見。至於橙色方塊，如果絕對定位，並且父母方位相對/絕對定位，則給上方的小橙色方塊定位：0;正確：0; –

這是你所期待的嗎？

添加top:0到.image-options並交換圖像和內部div的位置。

DEMO

來源

2012-10-31 10:29:24 Sowmya

你需要頂部/底部和左/右位置：絕對在所有瀏覽器中工作 – BennyLava

在這裏，你走了，我認爲這將幫助你。

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>

來源

2012-10-31 10:56:24 Klingstedt

div標籤隱藏在圖像後面

回答

相關問題