CSS中z-index屬性的簡單理解

總之就是一句話：擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
				position: relative;
			}
			
			#box1{
				color: red;
				font-weight: 900;
			}
			
			.spouse{
				position: absolute;
				width: 300px;
				height: 300px;
				left: 0px;
				top: 0px;
				background-color: antiquewhite;
				z-index: -1;
			}
			
			.kunling{
				width: 200px;
				height: 200px;
				position: absolute;
				left: 200px;
				top: 200px;
				z-index: 0;
			}
			
		</style>
	</head>
	<body>
		<div id="father">
			<div id="box1">
				<img src="img\spouse.jpg" class="spouse">
				我本該在上面
			</div>
		</div>
		<div id="box2">
			<img src="img\kunling.jpg" class="kunling" >
		</div>
		
	</body>
</html>

執行結果：
在這裡插入圖片描述
由上圖可知，按照順序大的那張圖片應該顯示在小的那張圖片的上方，但是它由於z-index為負數，小於小的那張圖片的z-index，因此就顯示在了index的下方。

注：創作不易，轉載請註明出處

https://blog.csdn.net/hanhanwanghaha一個超級無敵可愛的人歡迎你的關注！
有問題可在CSDN上私信我，期待與你的一起學習