Question

到目前为止我有这个html css

<html><head><style type="text/css">
.img_list {    
    width: 50px;
    height: 50px;
    position: relative;
}

#img_list .icon {
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}
li{
list-style:none;
}
</style></head>
<body>
<ul id="img_list">
    <li>
        <img src="images.jpg" alt="Image Title" class="img_list" />
        <img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
        <a>Charlie Chaplin</a>
    </li>
    <li>
        <img src="images.jpg" alt="Image Title" class="img_list"/>
        <img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
        <a>Charlie Bean</a>
    </li>
</ul>
</body>
</html>

这是渲染图像！[在此输入图像说明] [1]

我想要的是让向下箭头图像叠加在每个图像右下角的图像本身之上。我尝试过使用顶部，底部，左侧但是它与浏览器大小不一致。如何更改我的CSS以使其正常工作。

Answer 1

您正在获得该结果，因为您正在相对于容器#img_list定位图标。尝试将position:relative;添加到li css定义中，并将其从#img_list{定义中删除：

li{
    list-style:none;
    position:relative;
}

查看此实时演示（包含替换图片）：http://jsfiddle.net/wm4rj/

Answer 2

只需将position: relative;添加到列表项。

li {
list-style:none;
position: relative;
}

Answer 3

试试这个：

<html>
<head>
    <style type="text/css">
        #img_list li {
            list-style:none;
            position:relative;
            line-height:50px;
        }
        #img_list li .img_list {    
            width: 50px;
            height: 50px;
        }
        #img_list li .icon {
            width: 30px;
            height: 30px;
            position: absolute;
            z-index: 99;
            bottom: 20px;
            left:0;
        }
    </style>
</head>
<body>
    <ul id="img_list">
        <li>
            <img src="images.jpg" alt="Image Title" class="img_list" />
            <img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
            <a>Charlie Chaplin</a>
        </li>
        <li>
            <img src="images.jpg" alt="Image Title" class="img_list"/>
            <img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
            <a>Charlie Bean</a>
        </li>
    </ul>
</body>
</html>

在列表中叠加图像

3 个答案: