前端学习笔记之定位学习

搭建一个网页需要用到的布局方式
- 标准流
- 浮动
- 定位
定位的常见应用场景：
- 解决盒子与盒子之间的层叠问题
- 可以让盒子始终固定在屏幕中的某个位置
使用定位的步骤
- 设置定位方式
  - t通过属性名：position来设置，常见的定位模式有静态定位（static），相对定位（relative），绝对定位（absolute），以及固定定位（fixed）
- 设置偏移值
  - 偏移值设置分为两个方向。水平和垂直方向各选一个即可
  - 选取的原则一般是就近原则，离哪边近用哪个（left，right，top，bottom）
静态定位：默认定位方式，无定位
- 静态定位按照标准流特性摆放位置，它没有偏移
相对定位：相对于自己之前的位置进行移动
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
绝对定位：相对于祖先的元素位置进行移动
- 如果没有祖先元素或者祖先元素无定位，则以浏览器为准定位
- 如果祖先元素有定位，则以最近一级有定位的祖先元素为参考点移动位置
子绝父相：子级使用绝对定位，父级使用相对定位
- 子级绝对定位，不会占有位置，可以放到父级盒子里面的任何一个地方，不会影响其他的兄弟盒子
- 父级加定位，限制子盒子在父盒子里面移动
- 父盒子布局时，需要占有位置，因此只能是相对定位
固定定位：元素固定于浏览器可视区的位置，主要用于在浏览器页面滚动时元素的位置不会变
- 以浏览器的可视窗口为参照点移动元素
  - 跟父元素没有任何关系
  - 不随滚动条滚动
- 固定位置不占有原先的位置（脱标）
- 固定定位小技巧：固定到版心右侧位置： left：50%；margin-left：版心的一半
粘性定位：相对定位和固定定位的混合（sticky）
- 以浏览器的可视窗口为参照点移动元素
- 占有原先的位置
- 必须加bottom，top，left，right其中一个才有效
- 兼容性较差，IE不支持
定位叠放次序：使用定位布局时，出现盒子重叠的情况，可以使用z-index来控制盒子的叠放次序
- 数值可以是正整数，负整数或者0，默认时auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
定位的拓展：
- 绝对定位的盒子居中：加了绝对定位的盒子不能通过margin：auto水平居中，但是可以通过一下方法实现水平居中和垂直居中
  - 水平居中：left：50%，margin-left：-盒子宽度的一半
  - 垂直居中：top：50%，margin-top：-盒子宽度的一半
- 定位特殊特性：
  - 绝对定位和固定定位也和浮动类似
  - 行内元素添加绝对或者固定定位，可以直接设置宽度和高度
  - 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认是内容的大小
  - 脱标的盒子不会触发外边距塌陷
- 浮动的元素不会压住下面标准流的文字，绝对定位会压住所有标准流的内容