一、静态定位

CSS 中的静态定位是默认的定位方式 , 就是无定位 , 设置该定位方式 , 定位盒子不生效 ;

为盒子模型设置静态定位模式 , 该盒子模型就会按照标准流的方式摆放布局 , 没有任何边偏移的效果 ;

在使用定位时 , 几乎不适用静态定位 ;

二、相对定位

相对定位是盒子模型相对于其在标准流中的位置设置的 ;

如 : 盒子模型在标准流中 , 原来的位置是 (0 , 0) , 设置了相对定位 , 就是相对于原来的位置 (0, 0) 进行边偏移后的位置 ;

下面的示例中 , 盒子模型的初始位置是在浏览器的左上角 ( 0 , 0 ) 位置 , 此时设置相对定位 , 并设置边偏移 ,

使用 margin 也可以实现盒子放置在 ( 100, 100 ) 位置上 , 但是无法设置其浮动在其它盒子上方 ;

1、标准流下的盒子模型代码示例

盒子模型使用标准流布局的代码 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style>
		div {
			/* 设置标准流下盒子模型大小和位置 */
			width: 200px;
			height: 200px;
			background-color: pink;
			/* 上述盒子默认在 0,0 位置 */	
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

显示效果 :

在这里插入图片描述

2、相对定位下的盒子模型代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style>
		div {
			/* 设置标准流下盒子模型大小和位置 */
			width: 200px;
			height: 200px;
			background-color: pink;
			/* 上述盒子默认在 0,0 位置 */

			/* 定位 = 定位模式 + 边偏移 */
			/* 定位模式 : 相对定位; */
			position: relative;
			/* 顶部偏移量 100 像素 */
			top: 100px;
			/* 左侧偏移量 100 像素 */
			left: 100px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>