position属性 | 动画解释CSS定位布局

【position的五个值】static、relative、absolute、fixed、sticky

static

/* 默认值*/
.box{
	position: static;
}

• 正常文档流
• css默认布局方式

relative

/* 相对定位*/
.box{
	position: relative;
	left: 20px;
	top: 20px;
}

• 元素所占空间还保留在原位（其他元素不会挤占他原本的空间）
• 通过left、right、top、bottom来设置位置的偏移（相对元素的默认位置偏移）

absolute

/* 绝对定位*/
.box {
	position: absolute;
}

• 脱离正常文档流（后面元素可以挤占他的空间）
• 元素存在在挤占他空间的元素的上层（同时有两个定义了absolute属性的同级元素，后定义的覆盖在先定义的上层）

• 可通过left、right、top、bottom来设置位置的偏移，偏移的值是相对包含他的元素的边框位置来计算的
• 这个包含他的元素指：离他最近的有定位的元素（设置了position除static值、transform、perspective 这些属性），如果没有就一直向上找，直到body元素
• 通常给父级设置relative定位，因为不会影响正常的文档流

fixed

/* 固定定位*/
.box {
	position: fixed;
}

• 脱离正常文档流
• 偏移量是相对当前窗口计算的
• 设置好偏移之后，无论页面怎么滚动，都会被固定在同一位置
• 适合用于固定浮窗、导航条

absolute 和 fixed这种脱离正常文档流的定位方式

• 使行内元素可设置宽高
• 使块级元素在未设置宽高时，把元素的宽高设置成内容的宽高
• 设置left: 0; right: 0;使宽度占满包含容器、top: 0; bottom: 0;使高度占满包含容器

sticky

/* 粘性定位*/
.box {
	position: sticky;
}

• 相当于relative和fixed的结合
• 可以让元素在距离浏览器窗口一定位置时把它固定在这个位置，其它情况下还在正常的文档流中

z-index: ;: 设置 z-index 可以改变元素的覆盖关系，值越大越在上面。