css两个盒子移入时一个盒子从上到下覆盖第一个盒子
时间: 2023-06-14 16:03:07 浏览: 145
可以使用CSS的定位(position)和层叠顺序(z-index)属性来实现这个效果。
首先,需要将两个盒子放在同一个父元素中,并设置它们的定位(position)属性为绝对定位(position: absolute;)。然后,通过top、left、right、bottom属性来设置它们的位置。
接下来,需要设置它们的层叠顺序(z-index)属性,使第二个盒子的层叠顺序比第一个盒子高。这样,第二个盒子就会覆盖在第一个盒子上面。
下面是一个示例代码,供参考:
HTML代码:
```
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
```
CSS代码:
```
.container {
position: relative;
width: 200px;
height: 200px;
}
.box1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: #f00;
z-index: 1;
}
```
在这个示例中,第一个盒子(box1)占据整个父元素(container)的位置,第二个盒子(box2)位于第一个盒子之上,并覆盖了它的一部分。可以根据实际需求调整盒子的大小和位置。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)