实现页面滚动div动态切换及hover放大不干扰其他元素的方法求解

你现在的代码出现覆盖其他元素、干扰布局的问题有两个核心原因：

1. 你同时修改了height属性，height属于盒模型属性，变化时会改变元素在正常文档流中占用的空间，自然会挤压或覆盖周围元素
2. transform: scale()默认的缩放锚点是元素中心，放大时会同时向上下方向扩展，就会覆盖上方的内容

修复方案 #

你只需要保留transform做放大效果，删掉height的修改，同时调整缩放锚点即可，修改后的CSS如下：

#changeme {
  height: 50px;
  width:100px;
  transition: all .5s ease-in-out;
  /* 可选配置：保证放大后的元素层级更高，不会被其他元素遮挡 */
  position: relative;
  z-index: 10;
}

#changeme:hover {
  /* 删掉height、width的修改，仅保留transform实现放大效果 */
  transform: scale(1.5);
  /* 调整缩放锚点为顶部居中，放大时只向下扩展，不会覆盖上方内容 */
  transform-origin: top center;
}

原理解释 #

• transform属性的所有变化都不会影响正常文档流，元素原本占用的50px高、100px宽的位置会一直保留，不会对周围其他元素的位置造成任何影响
• transform-origin控制缩放的基准点，设置为top center后，放大过程会以元素的顶部中点为基准向下延伸，不会向上覆盖上方的标题、主文本内容
• 额外添加的position: relative和z-index是为了保证放大后的元素层级更高，不会被下方的其他元素遮挡

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