gpt4 book ai didi

css - 在列表中叠加图像

转载 作者:太空宇宙 更新时间:2023-11-04 00:08:09 25 4
gpt4 key购买 nike

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

最佳答案

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

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

关于css - 在列表中叠加图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14114195/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com