12-z-index
Posted 897463196-a
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了12-z-index相关的知识，希望对你有一定的参考价值。
z-index
这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在html后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .father1{ 12 width: 300px; 13 height: 300px; 14 background-color: red; 15 position:relative; 16 z-index: 3; 17 } 18 .child1{ 19 width: 100px; 20 height: 100px; 21 background-color: purple; 22 position: absolute; 23 top: 280px; 24 left: 350px; 25 z-index: 20; 26 27 } 28 .father2{ 29 width: 300px; 30 height: 300px; 31 background-color: green; 32 position:relative; 33 z-index: 2; 34 } 35 .child2{ 36 width: 100px; 37 height: 100px; 38 background-color: yellow; 39 position: absolute; 40 top: 0; 41 left: 350px; 42 z-index: 21; 43 } 44 </style> 45 </head> 46 <body> 47 <div class="father1"> 48 <div class="child1"></div> 49 </div> 50 <div class="father2"> 51 <div class="child2"></div> 52 </div> 53 54 </body> 55 </html>
作者：流浪者
日期：2019-08-31
以上是关于12-z-index的主要内容，如果未能解决你的问题，请参考以下文章