当其他元素出现和消失时平滑更改HTML元素位置的通用方法

是使用CSS过渡（CSS transitions）和动画（CSS animations）。

CSS过渡是一种在元素状态改变时平滑过渡的方法。通过定义元素的初始状态和最终状态，CSS过渡可以自动计算中间状态，并在一定的时间内将元素从初始状态过渡到最终状态。可以使用transition属性来定义过渡效果的属性、持续时间、延迟时间和过渡函数。常见的过渡属性包括位置属性（如top、left、right、bottom）、尺寸属性（如width、height）和透明度属性（如opacity）等。例如，可以使用以下代码实现一个平滑更改位置的过渡效果：

.element {
  transition: top 0.5s ease;
}

.element:hover {
  top: 100px;
}

上述代码中，当鼠标悬停在元素上时，元素的top属性会从初始值过渡到100px的最终值，过渡时间为0.5秒，过渡函数为ease。

CSS动画是一种通过关键帧（keyframes）来定义元素动画的方法。通过在关键帧中定义元素的不同状态，CSS动画可以在一定的时间内按照指定的顺序和时间点播放这些状态，从而实现动画效果。可以使用animation属性来定义动画效果的名称、持续时间、延迟时间、重复次数和动画函数。常见的动画属性包括位置属性、尺寸属性、透明度属性和变换属性（如旋转、缩放、倾斜等）。例如，可以使用以下代码实现一个平滑更改位置的动画效果：

@keyframes move {
  0% {
    top: 0;
  }
  100% {
    top: 100px;
  }
}

.element {
  animation: move 0.5s ease;
}

上述代码中，元素会从初始位置平滑地移动到100px的最终位置，动画持续时间为0.5秒，动画函数为ease。

除了CSS过渡和动画，还可以使用JavaScript来实现平滑更改HTML元素位置的效果。通过监听其他元素的出现和消失事件，可以在事件触发时使用JavaScript修改目标元素的位置属性，从而实现平滑过渡效果。例如，可以使用以下代码实现一个使用JavaScript实现的平滑更改位置的效果：

const element = document.querySelector('.element');
const otherElement = document.querySelector('.other-element');

otherElement.addEventListener('mouseenter', () => {
  element.style.top = '100px';
});

otherElement.addEventListener('mouseleave', () => {
  element.style.top = '0';
});

上述代码中，当鼠标进入otherElement时，element的top属性会平滑过渡到100px的最终值；当鼠标离开otherElement时，element的top属性会平滑过渡回初始值0。

总结起来，平滑更改HTML元素位置的通用方法包括使用CSS过渡、动画和JavaScript。具体选择哪种方法取决于具体的需求和场景。