【CSS】定位 ② ( 静态定位 | 相对定位 )
一、静态定位
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>
显示效果 :
