代码块 Copy !DOCTYPE html html lang = "en" head meta charset =
标签：
原文:CSS中的z-index属性如何使用z-index属性介绍
只有设置了定位我们才会使用到该z-index属性，如：固定定位、相对定位、绝对定位。
定位元素默认的z-index属性值是0。
如果2个定位的元素都没有设置z-index属性，后者会笼罩到前者。
如果2个定位的元素都设置了z-index属性，并且数值一样大还是后者会笼罩到前者。
z-index属性的属性值大的就会笼罩小，就是设置元素的层级。
z-index属性实践用实践证明这句话，如果2个定位的元素都没有设置z-index属性，后者会笼罩到前者。
代码块
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>z-index属性</title> <style> div{ width: 200px; height: 200px; } .div1{ background-color: red; position: relative; top: 50px; left: 50px; } .div2{ background-color: slateblue; position: relative; left: 100px; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
功效图
用实践来证明这句话，如果2个定位的元素都设置了z-index属性，并且数值一样大还是后者会笼罩到前者。
代码块
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>z-index属性</title> <style> div{ width: 200px; height: 200px; } .div1{ background-color: red; position: relative; top: 50px; left: 50px; z-index: 2; } .div2{ background-color: slateblue; position: relative; left: 100px; z-index: 2; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
功效图
用实践来证明这句话，z-index属性的属性值大的就会笼罩小，就是设置元素的层级。
代码块
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>z-index属性</title> <style> div{ width: 200px; height: 200px; } .div1{ background-color: red; position: relative; top: 50px; left: 50px; z-index: 3; } .div2{ background-color: slateblue; position: relative; left: 100px; z-index: 2; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
功效图
CSS中的z-index属性如何使用
，
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")