Html CSS top不适用于图像及其容器

我正试图建立一个网站，其中学生档案是必需的。top属性不适用于图像容器。我多次尝试更改该值，但都不起作用。即使将其应用于图像本身也不起作用。任何帮助都将不胜感激

.card{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
最大宽度：300px；
保证金：自动；
文本对齐：居中；
字体系列：arial；
背景色：白色；
}
.card.img容器{
位置：相对位置；
宽度：90%；
左：5%；
身高：45%；
排名前10%；
}
.card.img容器img{
宽度：100%；
位置：相对位置；
}
.卡p{
颜色：#000；
字号：18px；
}
.卡片.姓名{
字号：700；
}
.牌桌{
宽度：90%；
左：5%；
文本对齐：居中；
位置：相对位置；
边界间距：10px；
}

文件
名称

总波段

阅读：发言：
听：写：

如果我理解正确，您需要在顶部填充

：


.card{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
最大宽度：300px；
保证金：自动；
文本对齐：居中；
字体系列：arial；
背景色：白色；
}
.card.img容器{
位置：相对位置；
宽度：90%；
左：5%；
身高：45%；
排名前10%；
垫面：5%；
}
.card.img容器img{
宽度：100%；
位置：相对位置；
}
.卡p{
颜色：#000；
字号：18px；
}
.卡片.姓名{
字号：700；
}
.牌桌{
宽度：90%；
左：5%；
文本对齐：居中；
位置：相对位置；
边界间距：10px；
}

文件
名称

总波段

阅读：发言：
听：写：



您对图像有什么问题？不清楚您要求的是什么，top属性不适用于图像容器，这是什么意思？我希望从卡的顶部获得5%，但top属性似乎不起作用。当我在浏览器控制台中使用JS时，它工作得很好，但是css并没有显示期望的结果。我使用了一个本地图像，但要加载到这里，我使用了一个相同大小的在线图像请检查我的答案，我更新了它！top属性的百分比值基于包含块的高度，其中一个块没有明确的高度，请使用
margin
或
transform:translateY（5%）
谢谢。这很有帮助。顺便问一下，你能解释一下为什么要用这个而不是top吗？请查看Zohir Salak的评论。另外，如果答案解决了问题，请将其标记为已接受。旁注，我更愿意在实际图像上使用
变换
，而不是将整个框弄乱，以防将来可能会发生变化。