CSS中z-index属性的简单理解

总之就是一句话:拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。


<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>

运行结果:
CSS中z-index属性的简单理解_第1张图片
由上图可知,按照顺序大的那张图片应该显示在小的那张图片的上方,但是它由于z-index为负数,小于小的那张图片的z-index,因此就显示在了index的下方。

注:创作不易,转载请注明出处

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人欢迎你的关注!
有问题可在CSDN上私信我,期待与你的一起学习

你可能感兴趣的:(前端,安卓开发,html,css,html5)