html定位 | 易学教程

定位
在使用定位时候优先考虑他的参考对象
1.相对定位position：relative；
letft：100px；书写具体位置
top：100px；
相对的是自身原有的位置，不会影响文档流
相对定位移动后会保留原有位置，不会被其他元素侵占
使用场景，小范围移动，移动后原有位置不在使用
2.绝对定位position：absolute；
脱离当前文档流使元素飘起来，
绝对定位参考值回去找具有相对定位的父元素，如果没有继续往上找直到整个文档
90%以上的定位都需要相对定位的配合也就是人们常说的父向子绝
绝对定位使用场景，1大小范围都可以，但是需要父级的配合 2动态拖拽时或者一些需要重叠的动画效果。
z-index：调整当前元素的层级，数值越大层级越高，没有单位直接书写数值，需要调整多个时需要给每个元素逐一添加。
备注：还有固定定位和静子定位两种
代码示例

<style type="text/css">
	*{margin: 0px;
		padding: 0px;

	}
	div{width: 200px;
		height: 200px;
		border-radius: 50%;

	}

	.box1{width: 240px;
		height: 240px;
		background-color: red;
		position: relative;
		left: 278px;
		top: 278px;
		z-index: 9;
	}
	.box2{background-color: black;
		position: absolute;
		left: 400px;
		top: 400px;
		z-index: 8;

	}
	.box3{background-color: yellow;
	     position: absolute;
	    left: 200px;
	 	top: 400px;
	 	z-index: 7;}

	.box4{background-color: blue;
	     position: absolute;
	 	left: 400px;
	 	top: 200px;
	 	z-index: 6;}

	.box5{background-color: purple;
		  position: absolute;
		  left: 200px;
		  top: 200px;
		  z-index: 5;

	}
	.box6{background: #81D842;
		position: absolute;
		left: 300px;
		top: 100px;
		z-index: 4;}

	.box7{background-color:#F63B34;
	position: absolute;
		left: 500px;
		top: 300px;
		z-index: 3;}

	.box8{background-color: #ccc;
		position: absolute;
		left: 300px;
		top: 500px;
		z-index: 2;}

	.box9{background-color: #92908E;
		position: absolute;
		left: 100px;
		top: 300px;
		z-index: 1;}
	</style>
</head>
<body>
<div class="main">

	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5"></div>
	<div class="box6"></div>
	<div class="box7"></div>
	<div class="box8"></div>
	<div class="box9"></div>	
  	<div class="box1"></div>
</div>
</body>

来源：CSDN

作者：Jason–json

链接：https://blog.csdn.net/weixin_46146313/article/details/104102585

标签

绝对定位

定位

html代码

position