Html 如何将绝对定位的元素保持在其位置？

当父元素的高度更改时，如何使绝对定位的元素（已垂直居中于顶部：0；底部：0；边距：auto；）保持在其位置

---

该元素是一个完全位于垂直选项卡中心的img。当用户单击垂直选项卡时，它会展开以显示更多信息，这会将完全居中的图像移动到展开选项卡中的垂直居中位置。

是的，css3可以这样做。请试试这个，你会发现你的把戏

<div class="responsive-container">
    <div class="dummy"></div>

    <div class="img-container">
        <img src="http://placehold.it/150x150" alt="" />
    </div>
</div>

---

请尝试让我知道。

如果在这种情况下可能，请从css中删除top、left、bottom、right参数，元素将保持原样

这些参数使其绝对相对于窗口定位，但删除它们会将图元放置在其所在的位置。然后设置宽度、高度和边距将完成其余的工作

---

另一个选项是使父元素位置：相对、绝对或固定。然后，孩子的位置将被计算出来。

如果您不介意使用一点JavaScript，这将满足您的需要。img最初位于截面的垂直中间，但当截面尺寸改变时，它将保持在原位

document.querySelector（'.abs'）.dataset.top=document.querySelector（'.abs'）.offsetTop；
document.getElementById（'more'）。onclick=function（）{
var img=document.querySelector（'.abs'）；
if（document.getElementById（'more'）。选中）{
img.style.top=img.dataset.top+'px'；img.style.margin='0'；
}
否则{
img.style.top=''；img.style.margin=''；
}
};
节{位置：相对；}
#更多~p{显示：无；}
#更多：选中~p{display:block；}
.腹肌{
位置：绝对位置；
左：50%；
顶部：0；底部：0；高度：40px；
保证金：自动0；
}

Lorem ipsum dolor sit amet，圣职精英，sed do
临时性的劳动和生产许可证

显示更多
但是，我们必须尽可能少地进行实验
从一个普通的消费品中购买。二人世界

您可以试试这个


body，html{
身高：100%；
保证金：0；
填充：0；
}
.第二组{
宽度：30%；
身高：50%；
背景：红色；
位置：绝对位置；
排名：0；
底部：0；
保证金：自动；
}
.首先{
宽度：60%；
高度：200px；
位置：相对位置；
背景：粉红色；
}
使用此选项指定任何对象的确切位置

<style>
Position: absolute;
Top: 0px;
Left: 0px;
</style>


位置：绝对位置；
顶部：0px；
左：0px；

这会将对象锁定到左上角

然后用这个移动它：

<style> Transform: Translate(1px, 1px); </style>

Transform:Translate（1px，1px）；

这只是一些例子，修改它以适应您的格式（px、%，vh/vw或您使用的任何格式）：-）
CSS不能这样做；您需要JavaScript。您可以通过将父对象作为相对对象，子对象作为绝对对象来实现。
<style> Transform: Translate(1px, 1px); </style>