元素position从absolute切换为fixed时如何保持位置不偏移

问题根源 #

1. CSS position 不属于支持过渡动画的属性，即使写入transition规则也不会生效，切换时会直接跳变，破坏动画连贯性
2. 当前absolute定位的参考系是设置了position: relative的父级.button，而fixed定位的参考系是浏览器视口，两者坐标基准不一致，切换时必然出现位置偏移。

最优解决方案 #

因为你定义元素初始位置用的是vw（视口单位），和fixed定位的参考系完全匹配，直接把content元素默认设为fixed定位，全程不需要切换position属性，从根源规避跳变问题。

修改后完整代码 #

CSS代码

.button {
  position: relative;
  width: 100%;
  height: 100%;
}

.button>button {
  position: absolute;
  left: 50vw;
  top: 50vw;
  color: white;
  background-color: pink;
  border: none;
  padding: 30px;
  cursor: pointer;
}

.button>button:hover {
  background-color: purple;
}

/* 把position改成fixed，删掉transition里无效的position配置 */
.fixed {
  position: fixed;
  background-color: pink;
  left: 50vw;
  top: 50vw;
  text-align: center;
  width: 100px;
  height: 75px;
  transition: width 1s, height 1s, left 1s, top 1s;
}

.hidden {
  visibility: hidden;
}

.show {
  visibility: visible!important;
}

.bigger {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.close {
  border: none;
  visibility: hidden;
  background-color: red;
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  cursor: pointer;
}

.close:hover {
  background-color: yellow;
  color: black;
}

#testo {
  visibility: hidden;
}

body {
  height: 1000px;
  margin: 0; /* 额外添加，消除默认边距影响定位 */
}

JS代码

function big() {
  document.getElementById("content").classList.add('show');
  document.getElementById("content").classList.add('bigger');
  // 删掉切换position的冗余代码
}

function small() {
  document.getElementById("content").classList.remove('bigger');
  // 删掉切换position的冗余代码
  setTimeout(() => {
    document.getElementById("content").classList.remove("show");
  }, 1000);
  document.getElementById("testo").classList.remove('show');
  document.getElementById("close").classList.remove('show');
}

function delayed() {
  setTimeout(function() {
    document.getElementById("testo").classList.add('show');
  }, 1100);
  setTimeout(function() {
    document.getElementById("close").classList.add('show');
  }, 1100);
}

HTML代码（无修改）

<div class="button">
  <button onclick="big(); delayed()">expand</button>
  <div id="content" class="fixed hidden">
    <p id="testo">just testing this thing</p>
    <button id="close" class="close" onclick="small()">X</button>
  </div>
</div>

特殊场景兼容方案（如果必须切换position） #

如果你的实际业务场景必须要在absolute和fixed之间切换，可以按以下逻辑处理：

• 展开时：先执行展开动画，等动画完全结束（1s后）再添加position: fixed属性
• 收拢时：先计算当前元素相对于父级的坐标和尺寸，把position切回absolute后手动赋值这些属性保持视觉位置不变，再执行收拢动画，动画结束后重置属性即可。

内容的提问来源于stack exchange，提问作者Mari 1