如何让div悬浮于另一个div上
要让一个div悬浮于另一个div上，我们需要使用CSS中的 position 属性和 z-index 属性。
position属性
position 属性可以控制元素在页面上的位置，它有四个属性值：
static：元素在正常的文档流中，left、right、top、bottom属性无效。
relative：元素相对于自己原来的位置定位，left、right、top、bottom属性可以作用。
absolute：元素相对于最近的有定位属性的祖先元素定位，如果没有祖先元素有定位属性，则相对于body，left、right、top、bottom属性可以作用。
fixed：元素相对于浏览器窗口定位，left、right、top、bottom属性可以作用。
对于本文要实现的悬浮效果，我们需要使用 absolute 和 relative。
z-index属性
z-index 属性可以控制元素的堆叠顺序，如果一个元素的 z-index 值比另一个元素的值大，那么这个元素就会在另一个元素的上面。
我们来看一下上面的代码是如何实现的，首先，我们有两个 div，第一个是父元素，有一个 gray 的背景颜色和 relative 的定位属性。第二个是子元素，有一个 red 的背景颜色和 absolute 的定位属性。
div {
width: 200px;
height: 200px;
}
.parent {
background-color: #ccc;
position: relative;
}
.child {
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
我们现在可以看到红色的 div 被嵌套在灰色的 div 中心位置，这是因为子元素的定位是绝对的，它已经脱离了文档流，所以我们可以将它放在任何位置。
现在我们想让红色的 div 悬浮在灰色的 div 上，并且看起来像是浮在上面。
.parent {
/* ... */
z-index: 1;
}
.child {
/* ... */
z-index: 2;
}
我们添加了一个 z-index 属性来控制谁位于谁的上面，结果如下：
现在的效果就是红色的 div 突出了，看起来像是悬浮在灰色的 div 上。
渐变悬浮效果
如果你想让悬浮效果更加自然的话，可以采用 box-shadow 属性，如下所示：
.parent {
/* ... */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.child {
/* ... */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
我们使用了两个不同的 box-shadow 阴影效果，其中灰色的 div 有一个较小的阴影效果，而红色的 div 有一个更大的阴影效果。这样，我们就创造了一个灰色的背景和一个红色的悬浮效果，如下所示：
现在，我们就实现了一个渐变悬浮效果。
总结
在本文中，我们学习了如何使一个 div 悬浮于另一个 div 上。我们使用了 position 和 z-index 属性来控制定位和堆叠顺序，并使用了 box-shadow 属性来达到渐变效果。
这个技术非常有用，可以用于创建悬浮菜单、气泡提示框、对话框等等。希望你对这个技术有所了解。