Html 将图像绝对定位到相对div

嗨，问这个我觉得真的很愚蠢，我有一个我正在处理的文件，我正试图将我的个人资料图片绝对定位到一个带有相对位置的div，但是它不起作用，并且父div没有环绕img。我相信这是一个简单的解决方案。父div是否必须具有高度和宽度

.parent{
位置：相对位置；
}
#剖面图{
位置：绝对位置；
}

您必须设置容器的宽度和高度，以便为图像提供足够大的底座，使其位于顶部（容器不会缠绕在其周围，因为绝对定位的图像不在文档流中，而是位于顶部）-确保容器上有position:relative，并假定您希望图像位于左上角，然后图像上有top:0和left:0。我想你的定位绝对是为了分层？如果不是的话，我会质疑使用绝对定位，因为使底层容器足够大会带来额外的复杂性。

我想，关于HTML元素的绝对定位，您可能有错误

通过将元素设置为

位置：绝对将其完全从文档流中删除。因此，没有一种自动环绕任何parant元素的方式。与实际父元素的唯一连接是，您可能将该元素设置为
位置：相对
，因此绝对定位元素的坐标取决于其父元素的位置和尺寸

如果你确切知道最终图像的大小，你的想法只能在这里正常工作。然后你可以用这样的东西：

用于此的CSS如下所示：

.parent {
    position: relative;
    border:1px solid #c00;

    width:200px;
    height:200px;
}

#profilepic {
    position: absolute;
    border:1px solid #0c0;

    width:100px;
    height:100px;

    left:50px;
    top:50px;
    box-sizing:border-box;
}

通过添加以下内容，您将获得您描述的效果：

a:hover #profilepic{
    width:120px;
    height:120px;

    left:40px;
    top:40px;
}

当绝对定位时，您应该记住，绝对定位是指这些元素从页面上的元素流中删除。具有这种定位类型的图元不受其他图元的影响，也不影响其他图元。每次使用绝对定位时，这是一个严肃的问题。它的过度使用或不当使用会限制网站的灵活性




.parent{
位置：相对位置；
背景颜色：绿色；
高度：150像素；
宽度：200px；
显示：内联块；
保证金：2倍；
}
#剖面图{
位置：绝对位置；
宽度：100%；
身高：100%；
过渡：均为0.5s；
边界：2件坚固的海军；
}
#图片：悬停{
宽度：120%；
身高：115%；
z指数：10；
过渡：所有1；
}
设置位置属性时，最好设置“上/下”和“左/右”以获得预期的结果。但你不应该，正如你上面所说

将顶部和底部设置为0

相反，您应该设置“顶部”或“底部”属性，因为设置这两个属性会导致它们相互矛盾，并且浏览器可能会忽略这两个属性或根据实现选择一个

试试这个：

HTML

你能重现问题并发布代码吗？你至少需要为父（相对）div指定一个高度，以便它“环绕”绝对位置的图像。我想是高度和宽度。。我已经指定了宽度和高度，为了测试它，我将顶部和底部设置为0，但是img保持在相同的位置，而不是移动到父对象的左上角。您现在知道图像及其容器的确切显示大小了吗？
<div class="parent"> 
    <a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
        <img id="profilepic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Charles_Darwin_seated_crop.jpg/220px-Charles_Darwin_seated_crop.jpg"/>
    </a>
</div>

/* background-color and width/height only for demonstration
 * width/height can be removed if other elements cause the 
 * parent's size to expand
 */

.parent {
    position: relative;
    background-color:#ddd;
    width:200px;           
    height:300px; 
}

#profilepic {
    position: absolute;
    top:20px;
    left:20px;
}