Html 如何在div上重叠图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3382004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to overlap a image on a div?
提问by nectar
I want to place a small circular login image on the border of divsuch that half image will be outside the border line just for style purpose?I think I have to set z-index but how OR is there any better way?
我想在边框上放置一个小的圆形登录图像，div这样半个图像将在边框线之外只是为了样式目的？我想我必须设置 z-index 但如何或有更好的方法？
回答by Ash Burlaczenko
Thats exactly what you need to do.
这正是你需要做的。
Give you img a class name. Then in your style sheet add something like this
给你 img 一个类名。然后在你的样式表中添加这样的东西
#classname
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}
z-index needs to be a number greater than your div which will have an index of 0 if you haven't changed it.
z-index 需要是一个大于你的 div 的数字，如果你没有改变它，它的索引为 0。
Hope this helps.
希望这可以帮助。
回答by nectar
.overout {
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}
回答by Aedaeum
You can do this very easily using divs. Consider the following code
您可以使用 div 轻松完成此操作。考虑以下代码
<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
<div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
</div>
</div>
</body>
</html>
All you have to do is replace the second divs "background-color" property with the "background-image" property and nest that div inside your existing div. Make sure you make the div the exact size of your logo and set background-repeat: no-repeat;
您所要做的就是将第二个 div 的“background-color”属性替换为“background-image”属性，并将该 div 嵌套在现有 div 中。确保使 div 与徽标的大小相同并设置 background-repeat: no-repeat;
Hope that helps. Test the example code I posted. You can place all the style information into a css class like this:
希望有帮助。测试我发布的示例代码。您可以将所有样式信息放入一个 css 类，如下所示：
.logo
{
background-image: url(yourlogo.png);
background-repeat: no-repeat;
width: /* width of logo */
height: /* height of logo */
top: /* distance from top */
left: /* distance from left */
}
