CSS定位属性 position

一、概述

position ：值为static之外的其他值时，称元素为定位元素

• static：初始值
• reletive：相对定位
• absolute：绝对定位（创建BFC）
• fixed： 固定定位（创建BFC）
• sticky：粘性定位

left、right、top、bottom：偏移量，以确定元素最终位置

二、相对定位position: relative

• 相对其在普通流中的位置进行定位（生成相对定位的元素，相对于其正常位置进行定位）
• 未脱离普通流，仍在普通流中占据原有空间和位置
• 若同时设置left、right、则以left为准，若同时设置top、bottom，则以top为准
• top, left, right, bottom

内心OS：纯纯一堆经书！这怎么领会！

总之在使用absolute定位之前可以将父元素的盒子relative定位

二、绝对定位position: absolute

•  相对其包含块（containing block）进行定位
  • 距离其最近的定位祖先元素（即position不为static的元素）
  • 初始包含块：视口（viewport）    显示窗口
• 脱离普通流，在普通流中不再占据任何空间
• 产生BFC
• top, left, right, bottom
• 对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位（默认定位以外的第一个父元素）

这次顾名思义不要思错啦，这是绝对定位

top:本元素的top相对上一个定位元素的top

三、绝对定位元素的宽高和偏移量

• 元素的width和height的值不是auto时：
  • top和bottom都被指定：top优先
  • left和right都被指定：left优先（当direction为ltr时）
• 元素的width和height的值时auto时：
  • top和bottom都被指定：元素自动填充可用的垂直空间
  • left和right都被指定：元素自动填充可用的水平空间
  • left、right、top和bottom都被指定：元素自动填充可用的水平和垂直空间
• height：100%有效
• margin：auto（在同时设置4个方向的偏移量为0，且宽高小于父元素时可以水平垂直居中） 

这部分较好理解

四、固定定位position：fixed

•  相对视口进行定位
• 脱离普通流
• 产生BFC
• top, left, right, bottom

 五、粘性定位position: sticky

• 是相对定位和固定定位的结合体
• 正常情况下，元素会随着页面滚动，当到达屏幕特定位置时，将固定在该位置，直到页面滚动到其父元素的尽头为止