0

到目前为止我有这个 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 以使其正常工作。

4

3 回答 3

1

您得到该结果是因为您将图标相对于容器定位，#img_list. 尝试添加position:relative;到您的licss 定义中，并将其从#img_list{定义中删除：

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

请参阅此现场演示（带有替换图像）：http: //jsfiddle.net/wm4rj/

于 2013-01-01T21:07:13.487 回答
1

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

li {
list-style:none;
position: relative;
}
于 2013-01-01T21:07:40.790 回答
1

试试这个：

<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>
于 2013-01-01T21:10:07.880 回答