z-index
Posted rixian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了z-index相关的知识，希望对你有一定的参考价值。
一.关于上篇博客的回顾
1.定位
(1).相对定位
①.参考点:相对原来的位置
②.特性:
a.如果一个标准文档流的盒子,仅仅设置了相对定位,与普通盒子一样
b.设置相对定位之后,如果调整位置,会"留坑"
③.作用:
a.微调元素
b.子绝父相的参考
c.提升层级(不建议)
(2).绝对定位
①.参考点:
父子盒子嵌套,如果父辈盒子设置了相对定位,(聚堆定位,固定定位,没有实战意义),那么子盒子都是以父辈盒子的左上角为参考点
单个盒子设置绝对定位,如果以top描述,以页面的左上角为参考点
如果以bottom描述,以浏览器的左下角为参考点
②.特征
a.脱标
b.提升层级,建议使用绝对定位
(3).浮动和定位一起使用
①.浮动通常都是大模块实现并排
②.定位小模块调整位置(子绝父相)
(4).属性
①.文本水平垂直居中
②.span
转块或者行内块,浮动,绝对定位,固定定位
width
height
text-align:center
line-heigth = height
③.标准文档流盒子居中
margin: 0 auto
④.浮动的盒子居中
给浮动的元素套一个父盒子,设置该盒子overflow:hidden;
给父盒子设置:margin: 0 auto
二.z-index的使用
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在html后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .father1{ width: 300px; height: 300px; background-color: red; position:relative; z-index: 3; } .child1{ width: 100px; height: 100px; background-color: purple; position: absolute; top: 280px; left: 350px; z-index: 20; } .father2{ width: 300px; height: 300px; background-color: green; position:relative; z-index: 2; } .child2{ width: 100px; height: 100px; background-color: yellow; position: absolute; top: 0; left: 350px; z-index: 21; } </style> </head> <body> <div class="father1"> <div class="child1"></div> </div> <div class="father2"> <div class="child2"></div> </div> </body> </html>
以上是关于z-index的主要内容，如果未能解决你的问题，请参考以下文章