如何实现CSS hover时元素scale放大并悬浮于其他元素之上且不位移

需求：鼠标悬停在子div上时，元素缩放、悬浮在所有其他元素上方，同时其他元素不会发生位移。

初始代码（未完全实现需求） #

CSS

div {
    display: flex;
}

div .childDivs {
    width: 15rem;
    height: 15rem;
}

div .childDivs:hover {
    transform: scale(1.01);
}

HTML

<div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
</div>

示例效果 #

修正后的代码（完整实现需求） #

要实现悬浮在上且不影响其他元素布局，需要添加几个关键CSS属性：

• position: relative：让z-index属性生效，确保悬停元素能提升层级
• z-index: 999：将悬停元素置于其他元素之上
• transition：添加平滑的缩放过渡动画，提升体验

完整CSS代码

div {
    display: flex;
    gap: 1rem; /* 可选：给子元素添加间距，更直观看到悬浮效果 */
}

div .childDivs {
    width: 15rem;
    height: 15rem;
    position: relative; /* 为z-index生效做准备 */
    transition: transform 0.3s ease; /* 平滑过渡 */
    background: #eee; /* 可选：添加背景色，方便观察 */
}

div .childDivs:hover {
    transform: scale(1.1); /* 调整缩放比例，效果更明显 */
    z-index: 999; /* 悬浮在其他元素上方 */
}

说明：transform: scale()本身不会改变元素的布局空间，所以其他元素不会位移；通过position: relative和z-index可以让悬停元素覆盖在其他元素之上。

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