css怎么让div悬浮于另一个div上

CSS实现div悬浮于另一个div上

现在，我们来看一下如何使用CSS将一个div悬浮于另一个div上。我们需要使用position属性，分别给两个div设置不同的值。示例代码如下：

		<div class="container">
			<div class="float"></div>
			<div class="top-div"></div>
		</div>
	

container是一个高宽为300px的div容器，float是150px的圆形div。top-div是一个高50px的div，我们将它设置在float上方，实现悬浮效果。

接下来，我们给这三个div设置样式：

		.container {
			width: 300px;
			height: 300px;
			position: relative;
			background: #f9f9f9;
			border: 1px solid #ccc;
		}
		.float {
			width: 150px;
			height: 150px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #ddd;
			border: 1px solid #ccc;
			border-radius: 50%;
			box-shadow: 0 0 10px #ccc;
			z-index: 1;
		}
		.top-div {
			width: 80%;
			height: 50px;
			position: absolute;
			top: 20%;
			left: 10%;
			background: #fff;
			border: 1px solid #ccc;
			z-index: 2;
		}
	

我们给container设置了一个相对定位，让其中的两个div可以根据它进行定位，float使用的是绝对定位，top和left属性设置为50%，让它居中，并且使用transform属性将它定位在正中间。top-div使用的也是绝对定位，但位置是相对于container定位的。注意，float的z-index属性要小于top-div的z-index属性，这样top-div才会悬浮在它之上。

在以上的示例代码中，我们演示了如何使用CSS将一个div悬浮于另一个div上。需要注意的是，在实现相应的悬浮效果时，还需要掌握其他技巧，比如使用过渡效果、动画效果等。总之，我们需要不断深入地研究和学习这些CSS技术，才能更好地实现我们的应用需求。