如何在HTML中定位一个图像？
我是一个初学者在rails编程，尝试在页面上显示许多图像。 一些图像是在别人之上。 简单点说，我想要一个蓝色方块，在蓝色方块的右上angular有一个红色方块（但不是在angular落里）。 我试图避免合成（与ImageMagick和类似）由于性能问题。
我只想定位相互重叠的图像。
作为一个更困难的例子，设想一个里程表放置在一个更大的图像。 对于六位数字，我需要合成一百万张不同的图像，或者一次就完成，所需要的就是将六张图像放在另一张图像的上面。
好的，过了一段时间，下面是我所着的：
.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>
这是我所做的将一幅图像漂浮在另一幅图像上的准确expression。
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">
这是可能给你的想法的代码：
<style> .containerdiv { float: left; position: relative; } .cornerimage { position: absolute; top: 0; right: 0; } </style> <div class="containerdiv"> <img border="0" src="https://www.google.comhttp://img.dovov.combranding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="""> <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt=""> <div>
的jsfiddle
我怀疑Espo的解决scheme可能不方便，因为它要求你绝对地定位两个图像。 你可能希望第一个把自己定位在stream程中。
通常，有一种自然的方式就是CSS。 你把位置：相对于容器元素，然后绝对地把孩子放在里面。 不幸的是，你不能把一个图像放在另一个图像里。 这就是为什么我需要容器分区。 请注意，我把它作为一个浮动，使其自动适应其内容。 使其显示：内联块应理论上也可以工作，但浏览器支持差。
编辑：我从图像中删除大小属性来更好地说明我的观点。 如果您希望容器图像具有其默认大小，并且事先不知道大小，则无法使用背景技巧 。 如果你这样做，这是一个更好的方式去。
我注意到的一个问题可能会导致错误是在rrichter的答案，下面的代码：
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
应该在样式中包含px单位。
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
除此之外，答案工作正常。 谢谢。
你可以绝对地定位相对于它们的父元素的pseudo elements 。
这为您提供了两个额外的层面来处理每个元素 – 因此将一个图像放置在另一个图像上变得很容易 – 使用最less的和语义标记（没有空的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; }
这是一个现场演示
内联样式仅用于清晰。 使用一个真正的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>
简单的方法是使用background-image，然后在该元素中放置一个<img>。
另一种方法是使用CSS图层。 有很多可用的资源可以帮助你，只需要searchCSS层 。
@ buti-oxa：不要迂腐，但你的代码是无效的。 HTML width和height属性不允许单位; 你可能会想到CSS width:和height:属性。 您还应该使用<style>标签提供内容types（ 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>
离开px; 在width和height属性可能会导致渲染引擎畏缩。
