html - 在一个带有图像的 div 中使用多个类

Question

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

演示 http://jsfiddle.net/mRRA4/

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;
}

演示

Answer 2

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