Html 如何将10x10px图像覆盖在另一个图像上？

我的网站上有一个用户头像。简单图像标签：

<img src="foo.jpg" class="userphoto" width="48" height="48" alt="">

---

感谢您的帮助。

首先，您必须定位它，通常是相对的或绝对的

其次，如果存在其他定位元素，则必须设置一个

z-index

，尽管不一定需要

使用

top/left

或

bottom/right

组合将图像分层到另一个图像上

这是没有看到任何html/css的建议。这显然会因情况的不同而有所不同

#el-on-top { position:absolute; top:0; left:0; z-index:1; }

---

您可能需要设置

位置：relative

，以便AP'd元素的顶部相对于某个对象，而不是包装器或整个页面。

我知道我没有使用您想要的确切尺寸，但这里有一个工作示例。（您需要父“.main_photo”div作为主照片的尺寸。）

.main\u照片{
位置：相对位置；
宽度：80px；
高度：80px
}
.镶嵌{
位置：绝对位置；
顶部：5px；
右：5px
}

谢谢，不过我已经向您展示了HTML。“usephoto”的CSS非常简单-垂直对齐：中间和位置：相对。你有没有可能用一些代码更新你的答案？我一直在寻找建议，看看我是否需要一个单独的div标签和叠加的图像，或者我可以用一些CSS直接应用到img标签上吗？这是HTML的一个片段。考虑到这是一行HTML，很难确定结构，这对于堆叠顺序和分层（z索引）至关重要。虽然一般来说，只需将图像放大并使用“上/左”即可。如果你设置一个JSFIDLE会有帮助。这些答案的问题是样式元素“position”不受以下电子邮件客户端的支持：Outlook 2007/10/13 iPhone iOS 7/iPad（position:fixed；不会导致元素相对于阅读窗格定位）Yahoo！邮件谷歌Gmail来源：通过这个相关的例子。谢谢这是可以改进的，这样您就不必指定div的宽度和高度：仅仅是一个没有任何代码的链接是不好的。。。

.foo
{
   position: absolute;
   top: 0;
   right: 0;
}

.fboverlay
{
    background-image: url('/image/facebook/logo.gif');
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    width: 10px;
    height: 10px;
}

#el-on-top { position:absolute; top:0; left:0; z-index:1; }