css学习笔记：定位position

css position定位

position选值类型：

static：默认状态，不开启定位

relative：相对定位

absolute：绝对定位

fixed：

sticky：粘性布局

相对定：relative

特点：

1. 开启相对定位的元素，在不设置偏移量的情况下，元素不会发生任何变化

2. 参照元素在文档流中的位置来定位，简单来说就是参照元素的原始位置

3. 相对先定位会使元素的层级提升，在其他元素之上

4. 相对定位不会使元素脱离文档流

5. 相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素

偏移量：当元素开启了定位之后，可以通过偏移量来设置元素位置，不开启。

top：定位元素和定位位置上边的距离。垂直方向，大多数情况下，top和bottom任选其一

bottom：定位元素和定位位置下面的边距

left：左侧距离

right：右侧距离

绝对定位：absolute

特点：

1. 会使内容脱离文档流

2. 会使内容层级提升

3. 会使行内元素变成块元素，块元素的大小被元素撑开

4. 如果不设置偏移量，元素位置不会发生变化

5. 绝对定位是针对于其包含块来定位的

包含块（containing block）：

1. 正常情况，包含块就是离当前元素最近的祖先块元素

2. 开启了绝对定位的元素的包含块是，离其最近的开启了定位的祖先块

3. 若所有祖先元素都没有开启定位，则跟元素（HTML）就是其包含块

绝对定位元素的位置：

水平方向：

    必须满足等式：left+margin-left+border-left+width+border-right+margin-right+right

当发生过度约束时：

1. 若9个值都没有设置auto，则自动调整right值来满足等式

2. 若有值设置为auto，则调整该值

可以设置为auto的值：

margin、width、left、right。

其中left和right默认是auto，若等式不满足时，则自动调整这两个值

上下左右居中可设置margin为auto，top、right、bottom、left均为0

固定定位：fixed

特点：

1. 基本上与绝对定位相思

2. 针对视口进行定位，

3. 不会跟随网页滑动而改变位置