CSS position 属性

static (静态定位) 默认定位方式,top buttom left right 这些属性都是无效的

relative (相对定位) 不脱离文档流,保留原来的位置,相对原始位置进行偏移定位

absolute (绝对定位) 脱离了文档流,根据父类或者父类以上的第一个拥有position属性(非static)的元素进行偏移定位,如果父类或者父类以上都没有position属性(非static)的元素,则根据html进行偏移定位     

    如果要设置元素在他的父元素中偏移,则需要在他的父元素中设置position:relative;或者position:absolute;

    当只定义position: absolute时, top bottom left right都不指定,则元素与原文档流位置一致(即position值为static时的位置一样,但是不占位,后面的元素会无视它)

fixed (固定定位) 脱离了文档流,根据窗口为原点进行偏移定位,也就是说它不会根据滚动条的滚动而进行偏移 (一般标题栏或者浮动广告使用)

top:10px;  是指元素的顶部边缘和包含它的元素的顶部边缘的距离(元素从上往下偏移10px)

文档流？ 将窗体分成一行一行,自上而下的顺序排放元素,即为文档流。

1.利用position设置子控件在父控件中垂直水平居中

//父类
.parent {
  position: relative;
}

//子类
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.利用position设置高度占满整个屏幕(类似flex: 1的效果), 同时设置top bottom, 需要设置left/right 和 宽度

举个栗子   top: 50px; 顶部空出 50px 剩下的占满

position: absolute;
top: 50px;
bottom: 0;
left: 0;
width: 100%;
background-color: red;