如何在不改变其他div位置与顺序的情况下实现div覆盖（非absolute定位）

需要实现一个div覆盖另一个div的效果，同时不改变其他div的位置和排列顺序。当前使用display: inline-block布局，不想采用position: absolute的方式，求可行实现思路。

现有代码 #

HTML代码 #

<div class="first-box"></div>
<div class="second-box"></div>
<div class="third-box"></div>

CSS代码 #

.first-box{
  background-color: blue;
  display: inline-block;
  width: 40px;
  height: 40px;
}
.second-box{
  background-color: yellow;
  display: inline-block;
  width:40px;
  height:40px;
}
.third-box{
  background-color: red;
  width: 50px;
  height: 50px;
}
.first-box:hover{
  position: relative;
  z-index: 1;
  height: 50px;
  width: 50px;
}

期望效果 #

hover目标div时，该div能覆盖其他div，但自身位置保持不变（hover时蓝色方块变大并覆盖右侧黄色方块，下方红色方块位置不受影响）

方案一：相对定位+负margin反向偏移 #

利用position: relative的偏移特性，配合负margin抵消尺寸变化带来的布局位移，同时提高z-index实现覆盖：

.first-box:hover{
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  /* 负margin抵消尺寸增加的占位 */
  margin-left: -5px;
  margin-top: -5px;
  /* 相对定位拉回原位置 */
  left: 5px;
  top: 5px;
}

原理：通过负margin减少元素在文档流中占据的空间，避免挤压其他元素；再用relative的left/top偏移，让元素视觉位置保持不变；最后z-index确保它在其他元素上方实现覆盖。

方案二：transform: scale() + z-index #

用transform: scale()放大元素，transform不会改变元素在文档流中的占位，自然不会挤压其他元素，再配合z-index实现覆盖：

.first-box:hover{
  position: relative;
  z-index: 1;
  /* scale(1.25)对应原40px放大到50px */
  transform: scale(1.25);
  /* 以元素中心为缩放原点，避免视觉偏移 */
  transform-origin: center center;
}

原理：transform的scale属于视觉层面的变换，不会修改元素在文档流中的实际占位（仍然是原40px×40px），所以不会影响其他元素的位置；提高z-index即可让放大后的元素覆盖其他元素。这个方案代码更简洁，推荐优先使用。

内容的提问来源于stack exchange，提问作者Tony Stark 001