我是一個初學者在rails編程，試圖在頁面上顯示許多圖像。有些圖像要放在其他圖像上。爲了簡單起見，說我想要一個藍色方塊，在藍色方塊的右上角有一個紅色正方形（但不是很緊密）。由於性能問題，我試圖避免合成（使用ImageMagick等）。如何在HTML中將一個圖像放在另一個圖像的頂部？
我只想定位相互重疊的圖像。
作爲一個更困難的例子，設想一個里程錶放置在一個較大的圖像。對於六位數字，我需要合成一百萬張不同的圖像，或者在飛行中完成所有操作，只需要將六張圖像放在另一張圖像上。
好了，經過一段時間後，這是我登陸：
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 30px;
left: 70px;
}<div class="parent">
<img class="image1" src="https://placehold.it/50" />
<img class="image2" src="https://placehold.it/100" />
</div>作爲最簡單的解決方案。即：
創建放置在頁面流中的相對div;首先放置基本圖像作爲相對，以便div知道它應該是多大;將疊加層設置爲相對於第一個圖像左上角的絕對值。訣竅是讓親戚和絕對正確。
這是一個優雅的解決方案。如果「a」的ID爲「a」，「b」的ID爲「b」，那麼[此JavaScript代碼]（http://pastebin.com/YgS3hYw1）（設置`x`和`y`一些計算）爲改變`b`的位置而工作？ – DDPWNAGE 2015-08-13 01:42:47
做到這一點的簡單方法是使用背景圖像，然後在該元素中放置一個<img>。
另一種方法是使用css圖層。有很多資源可以幫助你，只需要搜索css layers。
這是我做過的將一幅圖像浮在另一幅圖像上的準系統。
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">很容易理解做里程錶有一個形象和它做了什麼，我想要的。 – lmiguelvargasf 2017-06-27 21:55:50
這裏的代碼，可能會給你的想法：
<style>
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>
我懷疑Espo's solution可能INCO很方便，因爲它需要你絕對定位兩個圖像。您可能希望第一個將自己置於流程中。
通常情況下，有一種自然的方式就是CSS。你在容器元素上放置相對位置，然後絕對放置其中的孩子。不幸的是，你不能把一個圖像放在另一個圖像內。這就是爲什麼我需要容器分區。請注意，我已將其設置爲自動適應其內容的浮動內容。使其顯示：內聯塊應理論上也可以工作，但瀏覽器支持很差。
編輯：我從圖像中刪除大小屬性，以更好地說明我的觀點。如果您希望容器圖像具有其默認尺寸，並且您事先不知道尺寸，則不能使用background trick。如果你這樣做，這是一個更好的方法。
這對我來說是最好的解決方案，因爲不需要指定圖像的寬度和高度，這會產生更多的可重用性。 – 2014-03-24 07:17:59
內聯樣式只是爲了清晰起見。使用真正的CSS樣式表。
<!-- First, your background image is a DIV with a background
image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
<!-- Second, create a placeholder div to assist in positioning
the other images. This is relative to the background div. -->
<div style="position: relative; left: 0; top: 0;">
<!-- Now you can place your IMG tags, and position them relative
to the container we just made -->
<img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
</div>
</div>
@ buti-oxa：不要迂腐，但你的代碼是無效的。 HTML width和height屬性不允許單位;你可能會想到CSS width:和height:屬性。您還應該使用<style>標籤提供內容類型（text/css;請參閱Espo的代碼）。
<style type="text/css">
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>
留在width和height屬性px;可能會導致渲染引擎在所不惜。
一個問題，我注意到可能會導致錯誤的是，在rrichter的答案，下面的代碼：
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
應該包括風格如內的像素單位。
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
除此之外，答案工作正常。謝謝。
您絕對可以將pseudo elements定位在它們的父元素上。
這爲您提供了兩個額外的圖層來處理每個元素 - 因此將一幅圖像放在另一幅圖像上變得很容易 - 使用最小和語義標記（沒有空白div等）。
標記：
<div class="overlap"></div>
CSS：
.overlap
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
}
.overlap:after
{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 5px;
left: 5px;
background-color: red;
}
這裏有一個LIVE DEMO
你可以使用精靈 – Jason 2010-01-05 02:57:38