Question

我在一个div中使用了两个类。我遇到的问题是我有两个不同的title div，每个标题都有自己的图像。我无法弄清楚为什么每个标题都不会显示自己的图像。两个图像都会叠加在第一个div上，我做错了什么？

CSS

.title {
border: 1px solid #AAA;
padding: 4px 22px;
}


.icon-img1:before {
position: absolute;
top: 4px;
left: 4px;
content: "";
background: url(http://png-4.findicons.com/files/icons/366/icomic/24/images.png);
width: 24px;
height: 24px;
}

.icon-img2:before {
position: absolute;
top: 4px;
left: 4px;
content: "";
background: url(http://png-5.findicons.com/files/icons/753/gnome_desktop/24/gnome_emblem_photos.png);
width: 24px;
height: 24px;
}

HTML

 <div class="title icon-img1">Title 1</div>
 <div class="title icon-img2">Title 2 </div>

Answer 1

现在在position: relative;班级

上添加.title

就像这样

.title {
    position: relative;
}

<强> Demo

Answer 2

您可以在Rohit建议的标题类中设置position: relative，也可以在第二个图像类的top值中添加32px。这样做的原因是position: absolute基于具有position属性的下一个父元素的位置。所以你的两个图像都被放置在身体外面，因此从左上方放置4px。给标题position: relative意味着它将被用作子类的“锚点”。

在一个div中使用多个类与图像

2 个答案: