HTML中的层级

水深无声 2022-03-06 18:42 324阅读 0赞

## HTML中的层级 ##

**总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。定位高于浮动，浮动高于标准流。（高低和占不占位置无关）**

**用法：**

1.  必须有定位。（除去static之外）。
2.  给定z-index的值为层级的值。（不给默认为0）  
    （层级为0的盒子，也比标准流和浮动高。）  
    （层级为负数的盒子，比标准流和浮动低。）  
    （层级不取小数）  
    （层级一样，后面的盒子比前面的层级高。）  
    （浮动或者标准流的盒子，后面的盒子比前面的层级高。）

**定位中：abselute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的。**

## 层级关系 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70]

## DEMO ##

没有设置层级关系，后边的li层级比前边的li高

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70 1]  
添加层级之后

li {
    			width: 190px;
    			height: 300px;
    			float: left;
    			margin-left: -1px;
    			border: 1px solid #ccc;
    			position: relative;
    			z-index: 1;
    		}
    		li:hover {
    			border: 1px solid #f40;
    			z-index: 2;      //鼠标浮动在上面时，层级变为2，最高
    		}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70]: /images/20220301/8e3b2bd594dc4323830b9315bb27146d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70 1]: /images/20220301/37931f19d1ef453884c973557c8075bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70 2]: /images/20220301/620acceffbe44a51a560fbbb7d846820.png