左侧div内部的div扩展覆盖右侧div
时间: 2024-05-12 21:13:22 浏览: 92
2个div并列
可以使用CSS中的`z-index`属性来实现左侧div内部的div覆盖右侧div。具体方法如下:
1. 给左侧div添加`position: relative`属性,使其成为一个相对定位元素。
2. 给左侧div内部的div添加`position: absolute`属性,使其成为一个绝对定位元素。
3. 给左侧div内部的div添加`z-index`属性,设置一个比右侧div的z-index值大的值,使其覆盖右侧div。
示例代码如下:
``` html
<div class="container">
<div class="left">
<div class="inner"></div>
</div>
<div class="right"></div>
</div>
```
``` css
.container {
position: relative;
height: 200px;
}
.left {
position: relative;
width: 50%;
height: 100%;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 1;
}
.right {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: blue;
z-index: 0;
}
```
在这个示例中,左侧div的内部div是红色的,右侧div是蓝色的,左侧div内部的div覆盖了右侧div。需要注意的是,z-index只对定位元素生效,因此左侧div和右侧div都需要设置position属性。
阅读全文