HTML中的层级

最新推荐文章于 2022-09-09 15:48:13 发布

qq_36727889

最新推荐文章于 2022-09-09 15:48:13 发布

阅读量6.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36727889/article/details/88760530

HTML中的层级

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

用法：

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

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

层级关系

在这里插入图片描述

DEMO

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

<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			margin: 100px auto;
			width: 1000px;
			list-style: none;
		}
		li {
			width: 190px;
			height: 300px;
			float: left;
			margin-left: -1px;
			border: 1px solid #ccc;
		}
		li:hover {
			border: 1px solid #f40;
		}
	</style>


	<body>
	
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		
	</body>

在这里插入图片描述
添加层级之后

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，最高
		}

在这里插入图片描述