css定位属性

CSS 有三种基本的定位机制：普通流、浮动流、定位流。
1、普通：上下排列的布局（注：大部分情况）
2、浮动：左右排列的布局（注：大部分情况）
3、定位：层叠（叠加）排列的布局 （注：大部分情况）
定位属性：position ：检索或设置对象的定位方式。
position属性值
1）static----默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static元素会忽略任何 top、bottom、left或 right 声明）
2)absolute-----相对于父级元素、的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定“left”、“top”、“right” 以及 “bottom”属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)
3)relative----是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】）
4)fixed-----相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
5)sticky-----可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。
案例

.box2的父元素是box,但是父元素没有定位，所以就以HTML。
若想以box为固定定位，需要在.box加上position:relative;


这是fixed 的案例，相对于浏览器定位，不管浏览器怎么滑动，都会在浏览器中显示，点击回到顶部，可以直接返回顶部。

by逆战班-张敏