网页开发中---CSS布局---position属性的运用

网页开发中—-CSS布局—-position属性的运用

1. position属性的值及详解

当position属性值为非static值时，我们通过left、right、top、bottom属性来定位元素的位置。

属性值	名称	描述
static	默认定位	HTML 元素标签默认的定位方式为 static
relative	相对定位	position: relative; 元素是相对于元素本身在文档流中的位置来定位的
absolute	绝对定位	position: absolute; 元素是相当于最近的带有非static定位属性的祖级元素来定位的
fixed	固定定位	position: fixed; 元素是相对于视窗定位的，定义了固定定位的元素不随鼠标的滚动而滚动，它始终显示在浏览器窗口的固定位置
sticky	粘性定位	position: sticky; 它是相对定位和固定定位的集合，当元素的位置符合给定的偏移值时由相对定位转换为固定定位

position属性的补充说明

1. 当定位属性为 absolute 和 fixed 时，元素在文档流中是不占位置的，它是漂浮（遮挡）在其它元素之上（下）或在视窗的空白区

2. 绝对定位 position: absolute; 当定位的元素的所有祖级元素，都不带有定位属性时，它是相对于第一视窗来定位，它会随着滚动条的滚动/滑动（包含上下或左右），滑出视窗

2. 实例演示position的非static属性（static为html文档的默认属性这里就不演示了-_-）

为了更方便阅读，把和定位不相关的CSS属性，就不展示了-_-！

2.1 相对定位

position: relative; 相对定位是相对于元素本身所在位置进行定位，它会跟随着鼠标滚动而滚动。

2.2 绝对定位

通常情况

position: absolute; 定义的元素的祖级元素并不是必须包含left、right等属性，它会随着鼠标滚动而滚动。

特例情况

当 position: absolute; 定义的元素的所有祖级元素都没有定位属性时，它会相当于第一视窗体来定位，并也会随着鼠标滚动而滚动。

2.3 固定定位

position: fixed; 固定定位是相对于视窗来定位的，并且它不会随着鼠标滚动而滚动，它始终显示在视窗的固定位置。

2.4 粘性定位

鼠标没有滚动时

鼠标滚动后