前端 - 关于css定位不生效？

Question

css样式：

结构

展示

想让左上角定位到右下角

Answer 1

不太理解你的意思，你的css代码和页面展示效果是一致的，如果每个img位置不一致的话，需要对每个img单独写样式

Answer 2

#list > img{
  position: absolute;
  bottom:0;
  right:0;
}

Answer 3

由于您提供的图片链接无法直接访问，我将基于您描述的场景和常见的CSS定位问题来提供一个可能的解决方案。

在CSS中，如果您想要将一个元素的左上角定位到另一个元素的右下角，您通常会使用position属性，结合top、left、right和bottom属性。这里的关键是确保父元素（或参照元素）有一个相对定位（position: relative;），而子元素（需要定位的元素）则使用绝对定位（position: absolute;）。

示例代码

假设您的HTML结构大致如下：

<div class="container">
    <div class="child"></div>
</div>

CSS样式可以这样写：

.container {
    position: relative; /* 父元素设置为相对定位 */
    width: 300px; /* 假设宽度 */
    height: 200px; /* 假设高度 */
    background-color: lightblue; /* 便于观察 */
}

.child {
    position: absolute; /* 子元素设置为绝对定位 */
    width: 100px; /* 假设宽度 */
    height: 100px; /* 假设高度 */
    background-color: tomato; /* 便于观察 */
    bottom: 0; /* 紧贴父元素的底部 */
    right: 0; /* 紧贴父元素的右侧 */
}

在这个例子中，.child元素的左上角会被定位到.container元素的右下角。

注意事项

1. 确保父元素有定位：父元素（.container）需要有一个非static的position值（如relative、absolute、fixed或sticky），这样子元素的绝对定位才能相对于它进行。
2. 调整尺寸和颜色：上面的示例中，我使用了width、height和background-color属性来使元素更易于观察。在实际应用中，您应该根据需要调整这些值。
3. 兼容性：CSS定位是一个广泛支持的特性，但在极少数情况下，您可能需要考虑旧浏览器的兼容性。
4. 其他布局技术：除了使用绝对定位外，您还可以考虑使用Flexbox、Grid或其他现代CSS布局技术来实现类似的效果，这些技术可能提供更灵活和强大的布局选项。