CSS(八)定位 - 爱码网

绝对定位


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 200px;
				display: inline-block;
				/* 让多个div排列在同一行，并且宽和高都可以设置 */
				font-size: 40px;
				color: #FFFFFF;
				line-height: 200px;
				text-align: center;
			}
			
			#second {
				/* 设置绝对定位，此时元素会脱离文档流 ,它原来的物理空间会被相邻的元素占有. 
				 * 绝对定位的元素在移动过程中是参照离它最近的父元素进行平移*/
				position: absolute;
				/* left:让元素向右移动多少像素， */
				left: 100px;
				/* top:让元素向下移动多少像素 */
				top: 50px;
			}
			
			#third {
				position: absolute;
				left: 200px;
				/* top:让元素向下移动多少像素 */
				top: 50px;
			}
		</style>
	</head>

	<body>
		<!--绝对定位：绝对定位的元素会脱离文档流，与它相邻的元素会挤过来
			固定定位：特殊的绝对定位，它的参照物是body元素(网页上所有的元素的祖先元素)
			
		-->
		<div style="background-color: #0000FF;">1</div>
		<div id="second" style="background-color: yellow ;">2</div>
		<div id="third" style="background-color: green;">3</div>
		<div id="four" style="background-color: red;">4</div>
	</body>

</html>

CSS(八)定位

相对定位


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				display: inline-block; /* 让多个div排列在同一行，并且宽和高都可以设置 */
			}
			#second{
				/* 相对定位:参照元素当前的位置进行定位 */
			   position: relative;
				/* 相对定位元素需要配合left,right,top,bottom来定位 */ 
				/* 参照它当前位置往右平移20px */
			   left:20px;
				/* 参照它当前位置往下平移40px */
			   top:40px;	
			}
			#third{
				 /* 绝对定位，参照物是离他最近的父元素 */
				/* 相对定位:参照元素当前的位置进行定位 */
					 position: relative;
					 right:50px;
					 bottom:50px;
			}
		</style>
	</head>
	<body>
		<!--相对定位：相对定位的元素没有脱离文档流，在定位过程中保留了物理空间 ，不会被相邻元素占有-->
	 <div style="background-color: #0000FF;">1</div>
      <div id="second" style="background-color: yellow ;">2</div>
      <div  id="third" style="background-color: green;">3</div>
       <div  id="four" style="background-color: green;">4</div>
	</body>
</html>

CSS(八)定位

z-inde属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		div{
		   width: 200px;
		   height:200px ;	
		   font-size: 40px;
		   
		   /* 文本水平居中 */
		   text-align: center;
		   /* 文本垂直居中 */
		   line-height: 200px;
		}
			#first{
				position: relative;
			   left: 10px;
			   top:10px;
			   z-index: 8; /* z-index:在z轴(视觉线)上的堆叠顺序，值越大的就越在前面，离我们的眼睛越近*/
			}
			#second{
				position: relative; 
				left: 20px;
			    top:-20px; /* 负数为往上平移 */
			   z-index: 10;
			}
		</style>
	</head>
	<body>
	   <div id="first" style="background-color: yellow;">1</div>
	    <div id="second" style="background-color: green;">2</div>
	</body>
</html>

CSS(八)定位