css position属性 相对定位 绝对定位 固定定位

1 相对定位

① 如何设置相对定位

position: relative;

② 相对定位元素定位的参考点

没有定位之间的位置

③ 相对定位元素的特点

1. 不会脱离文档流
2. 不会影响元素原来的显示模式
3. 可以使用 left、right、top、bottom 调整元素的位置
4. 即使相对定位元素调整了位置，其他相邻元素仍然按照它原来的位置进行排列

注意： left 与 right 不要同时设置，top 和 bottom 不要同时设置！

2 绝对定位

① 如何设置绝对定位

position: absolute;

② 绝对定位元素定位的参考点

1. 参考包含块进行定位
2. 普通元素包含块是父元素
   绝对定位元素的包含块是第一个定位的祖先元素，如果祖先元素没有定位的，包含块是整个页面

③ 绝对定位元素的特点

1. 脱离文档流
2. 不论元素原来的显示模式是什么，设置绝对定位之后，拥有绝对定位元素的特点
3. 绝对定位元素默认宽高被内容撑开，可以完美设置宽高以及内外边距，没有外边距塌陷合并，左右外边距auto不会居中
4. 可以使用 left、right、top、bottom 调整元素的位置

注意：

• 如果绝对定位元素宽度固定，同时设置 left 和 right 只有 left 生效；如果绝对定位元素没有固定宽度，同时设置 left 和 right 会都生效。

• 如果绝对定位元素高度固定，同时设置 top 和 bottom 只有 top 生效；如果绝对定位元素没有固定高度，同时设置 top 和 bottom 会都生效。

3 固定定位

① 如何设置为固定定位

position: fixed;

② 固定定位的元素定位参考点

1. 参考包含块进行定位
2. 固定定位元素的包含块是视口

③ 固定定位元素的特点（同绝对定位）

1. 脱离文档流
2. 不论元素原来的显示模式是什么，设置固定定位之后，拥有固定定位元素的特点
3. 固定定位元素默认宽高被内容撑开，可以完美设置宽高以及内外边距，没有外边距塌陷合并，左右外边距auto不会居中
4. 可以使用 left、right、top、bottom 调整元素的位置

注意：

• 如果固定位元素宽度固定，同时设置 left 和 right 只有 left 生效；如果固定定位元素没有固定宽度，同时设置 left 和 right 会都生效。

• 如果固定定位元素高度固定，同时设置 top 和 bottom 只有 top 生效；如果固定定位元素没有固定高度，同时设置 top 和 bottom 会都生