CSS中的定位(position)

定位

1、可选值

1、static (默认值)

元素是静止的，没有开启定位

2、relative 相对定位

3、absolute 绝对定位

4、fixed 固定定位

5、sticky 粘滞定位

2、relative

1、特点：

1、开启相对定位的时候，如果没有设置偏移量，则元素不会变化

偏移量：移动元素的距离（只要开启了定位，就可以生效）

• top
• right
• left
• bottom

2、参照物是自己原来在文档流中的位置

3、相对定位会提升元素的层级

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

5、相对定位不会改变元素的性质

3、absolute

1、特点

1、开启绝对定位的时候，如果不设置偏移量，则元素位置不会发生变化

2、开启绝对定位后，元素会从文档流中脱离

3、绝对定位会改变元素的性质，行内元素变为块元素，块的宽高会被内容撑开

4、绝对定位会使元素提升层级

5、绝对定位是相对于其包含块进行定位

包含块

• 正常情况下，包含块就是离当前元素最近的祖先块元素
• 绝对定位情况下，包含块就是离他最近的开启了定位的祖先元素
• 如果所有的祖先元素都没有开启定位，则其包含块就是根元素（html）

4、fixed

1、特点

1、固定定位也是一种特殊的绝对定位

2、固定定位永远参考于浏览器的视口进行定位

5、sticky

1、特点

1、特点与相对定位基本一样

2、粘滞定位可以将元素固定在某一个位置

6、关于绝对定位的一些注意事项right

1、没开启定位的公式:

margin-left + border-left + padding-left +wdith +padding-right + border-right + margin -right = 包含块的内容

2、开启绝对定位的公式

left + margin-left + border-left + padding-left +wdith +padding-right + border-right + margin -right +right

= 包含块的内容

3、可以设置auto的值：

margin width left right

4、设置水平垂直居中

        .box{
            width: 100px;
            height: 100px;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }