z-index设置-1
时间: 2023-08-09 13:07:03 浏览: 59
引用\[1\]中提到,如果设置了z-index属性的元素的z-index属性值小于0,那么该元素的层级会低于未设置z-index属性的元素。在代码中,如果将.box1的z-index属性值设置为-1,那么.box1的层级会低于.box2,即.box2会覆盖在.box1上方。页面效果如下:
```html
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: -1; /* z-index属性值小于0 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
```
页面效果:\[1\]
所以,当将z-index属性设置为-1时,元素的层级会低于未设置z-index属性的元素,被后面的元素覆盖。
#### 引用[.reference_title]
- *1* *2* [CSS 之 z-index 属性详解](https://blog.csdn.net/weixin_45092437/article/details/126493240)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [CSS深入理解z-index(z-index相关知识总结)](https://blog.csdn.net/qq_41000891/article/details/110005863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]