前端入门学习笔记（四）之CSS定位

一、基础介绍

学习五种定位模型：
static:自然模型
relative:相对定位模型
absolute:绝对定位模型
fixed:固定定位模型
sticky:磁贴定位模型

二、position属性详解

1.position-static

定义：块或行等元素垂直排列下去，行内元素从左到右

• 此时top，botton或z-index都没用
• 两个相邻的元素都设置了外边距，最终外边距为两者外边距最大的。
• 具有固定的width和height值，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余宽度。最后的结果是块水平居中

2.position-relative

• 任何元素都可以设置为relative，它的后代若是绝对定位则可以相对于relative进行定位
• 可以使用top/right/bottom/left/z-index相对这个元素本来的位置进行定位
• 可以使浮动元素进行偏移，并控制堆叠顺序（x-index）

3.position-absolute

• 脱离常规流，设置了position-relative的元素进行定位时仍然保留原来的位置，但是设置了position-absolute的元素定位时原来的位置没有了，而且相对的元素不再是原来的位置
• 若没有定位，则会先定位于祖先元素
• 宽高可以设置百分比
• irtb设置为0，且margin设置为auto auto元素会在祖先元素里居中
• 若irtb设置为auto，会恢复到常规流

4.position-fixed

• 固定定位是在滚动时也不动
• 其他和absolute一样

5.position-sticky

• 滚动页面发生偏移时保留在原位置
• 偏移标尺先祖先元素，若无滚动则是视口
• 和fixed有点像，但是不是dixed是完全固定在一个地方

三、课程总结

四、实际应用