如何將div對齊？

Question

我想將圖像對齊，即在另一幅圖像的正前方。

在這個例子中，小谷歌圖片是在左上角，但我希望它是右上：

http://jsfiddle.net/2NYve/

我已經嘗試過浮動：右對齊=「正確的」，但努力工作。 正如你可以在例子中看到的背景是一個svg對象，但對於這個例子，我簡單地把圖像放在這個地方，我認爲應該沒有什麼不同。

<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;"> 
<!--foreground--> 
    <div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></a></div> 
<!--background--> 
    <div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" /> 
    <!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div> 

Answer 1

添加（其中20像素是圖像的寬度）

right: 20px; 

的形象。這是唯一的辦法，據我所知，如果你使用絕對定位

http://jsfiddle.net/2NYve/1/

Answer 2

<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000"> 
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /> 
</a></div> 

<div style="z-index:1; width:100%; position: absolute; z-index:100"> 
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" /> 
</div> 

我添加到div與染色體標誌：

z-index:10; position: relative; 

而到了另外一個，用google徽標：

z-index:1 

我用CSS z-index proprety：http://www.w3schools.com/cssref/pr_pos_z-index.asp

下面是更新後的jsfiddle：http://jsfiddle.net/2NYve/7/

Answer 3

設置前景的div位置「相對」，而不是「絕對」，並添加一些右邊距爲一點點把它的權利。

<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;"> 
<!--foreground--> 
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></a></div> 
<!--background--> 
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" /> 
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>