logo标签列表

如何将图片叠加在一个 div 上？

htmlcssz-index
5

我想在 div 的边框上放置一个小圆形登录图像，以便半个图像会超出边框线以达到样式目的。我认为我需要设置 z-index，但如何设置呢？或者有更好的方法吗？

你目前尝试了什么？能否发布一张所需内容的示例图片？ - Sarfraz
3个回答
8

这正是您需要做的。

给您的img添加一个类名。然后在您的样式表中添加类似以下内容的代码：

#classname  
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}

z-index 的值应该是一个数字，比你的 div 的 z-index 值大，如果你没有修改它，则 div 的 z-index 值为 0。

希望这可以帮到你。

2
.overout {  
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}
1

你可以很容易地使用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>

你只需将第二个div的“background-color”属性替换为“background-image”属性，并将该div嵌套在现有div内。确保将div设置为与您的logo完全相同的大小，并设置background-repeat: no-repeat;

希望这能帮到你。测试一下我发布的示例代码吧。你可以将所有样式信息放入一个类似这样的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 */
}
通常情况下，您应该避免使用绝对定位，因为如果页面主要由相对对象组成，这将打断页面的流程。我发现z-index仅在绝对定位的对象上非常有用，否则您可以使用嵌套的div来实现相同的效果。 - Aedaeum
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接