圖像ontop的DIV

我有多個div圖像ontop的DIV

.barinfo { 
float:left; 
position:relative; 
overflow:hidden; 
width: 768px; 
height: 540px; 
background:#000; 
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); 
display: none; 
} 
.mosaic-overlay { 
    z-index:5; 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:#000; 
} 
.details { 
margin:15px 20px; 
}

，我想一個圖像來覆蓋它。圖像有左和右箭頭，用戶可以點擊它來瀏覽上面提到的div。

我如何使圖像完全獨立於任何東西，因此它是在div的ontop？現在，它只是被推向右側或底部的DIV

這樣做的任何方法的優良

HTML代碼：

<div id="bar5info" class="barinfo"> 
    <div class="mosaic-overlay"><img onload="imageLoaded()" src="images/Seg1.png" /></div> 
    <div class="details"> 
     <h4>Lorem ipsum</h4> 
     <p>Lorem ipsum</p> 
    </div> 
</div> 
<img src="arrows.png" /> <!--the arrows ontop of the divs-->

來源

2014-03-26 Friedpanseller

我們將需要html代碼來回答。 –

您可能需要的位置：絕對那img – Th0rndike

是的，你可以使用position:absolute做出獨立的圖像因此所有&使用的...但更具體的html代碼會好上下工夫....謝謝

來源

2014-03-26 09:26:31 Rohit

這不提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 – pbenard

簡單的設置位置：絕對和之後，你可以設置左，右，底部和頂部任何你喜歡...你在哪裏，你可以很容易地設置你的圖像/ div或任何HTML元素在另一個... – Rohit

裹一切都在一個容器內，把容器上position:relative，並position:absolute在一個羅列圖像。然後使用left,right,top和bottom屬性來定位箭頭相對於容器的網格。

這種方法

來源

2014-03-26 09:26:42 Faust

小提琴演示 – Rex

我不能改變位置：barinfo和mosaicoverlay的位置 – Friedpanseller

的概述見Absolute Positioning Inside Relative Positioning可以使用position:absolute從頁起飛的圖像，然後使用top:__px和left:__px在頁面圖像位置。

如果您想將位置引用到元素，則必須將position:relative添加到這些元素。

來源

2014-03-26 09:29:51

位置：絕對不工作img仍然被divs推動 – Friedpanseller

在這裏你可以在[jsfiddle]上找到一個工作示例（ http://jsfiddle.net/TXtWE/） –

不起作用，圖像越來越受到divs的推動 – Friedpanseller

回答

相關問題