z-index属性详解
一.定义和用法
z-index属性指定一个元素的堆叠顺序,也就是z轴position属性定义的是x轴和y轴z-index属性必须应用到position: relative|absolute|fixed的元素上,否则属性不会生效- 应用到
float属性的元素上也不会生效
二.代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; } .one { background-color: gray; /* .one进行绝对定位后, 灰色会盖住绿色 */ position: absolute; /* 如果要绿色层级高的话,使用z-index属性大于灰色层级即可 */ z-index: -1; } .two { background-color: green; } </style> <title>Document</title></head><body> <div class="one"></div> <div class="two"></div></body></html>
三.效果图
经验首页