css中position的4个取值的含义

css中position的4个取值的含义
一、在我们书写css代码的时候，position取值有4个，分别是：
1、 Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位
2、 Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
3、 Relative：相对定位，是相对于其原本的位置来定位的。
4、 Static：默认值，没有定位。
二、效果展示
1、position：absolution
①设置3个不同尺寸的的div，分别添加不同背景色，其展现的效果（在默认情况下他们会从上到下依次排列）。


②、我们对第1个元素，设置 position: absolute。

②出现的效果就是2和3的位置上移了

③为什么会出现这种情况呢？——出现的原因就是：我们对1设立了绝对定位；1不占有原来的位置【脱离文档】，2和3自然就上来了。
④需要注意的地方:当我们设置position取值为absolute的时候，是子元素相对于父元素。在上述案例中，这三个div的父元素都是html文档本身。
⑤控制位置：我们在一个父元素中的子元素设立了绝对定位以后，如何控制子元素的位置呢？可以通过top、bottom、left、right来控制偏移量。 例如：top：400px；right400px；就是距离父元素的右边边框位置400px；距离父元素的上边框位置400px；代码及其展示效果如下：


2、position：fixed（相对于窗口）
①还是三个块盒，默认情况下，3个块盒从上到下依次排列。

②当我们对第二个块盒设置
position: fixed;【浮动流，不占据原有位置，下面的元素会上来】
top: 100px;
left: 300px;
这三条属性以后，代表第二个块盒距离视口（浏览器窗口）左边300px；上边100px；展示的效果如下：


3、position：relative（相对于最近的父元素发生位移，且不脱离文档）
①先写出三个盒子：div中包含div1和div2；代码及其展示的效果如下


②、对div1设置position：relative属性，并设置偏移量 top100px；left：100px；

效果展示：

结论：div1相对于父元素发生位移，距离父元素的上顶边100px；左边100px；且div2还在原来的位置，没有飘上来

tips：我们平时在某个浏览器窗口中的看的小广告就是这样实现的哟！任尔东南西北风，我就在那里固定不动！
给大家看一下代码及其实现效果。