CSS定位属性（position）讲解

定位在我们页面中应用非常广泛，可是使我们页面更加简洁快捷，今天我们就来谈谈定位属性（position）

讲到定位我们就要先了解定位机制：
定位的三种机制
*普通流、浮动流、定位流
1、普通：上下排列的布局（注：大部分情况）
2、浮动：左右排列的布局（注：大部分情况）
3、定位：层叠（叠加）排列的布局 （注：大部分情况）

在CSS中定位属性position有以下几种属性值，我们分别来了解以下

1、position：static：默认值；没有定位； （可以用于取消元素之前的定位设置）
2、position：relative（相对定位）：相对定位 （参照物：自己所在的位置）
特点： 如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流，空间是会被保留。
不影响其他元素布局
3、position：absolute(绝对定位):绝对定位 （参照物：包含块—该元素的祖先级元素）
特点：使元素完全脱离文档流
使内联元素支持宽高{让内联具备块元素}
使块元素默认宽根据内容决定（让块具备内联的特性）
注：left、top、right、bottom是相对于当前元素自身进行偏移的 ，不能独自存在，必须配合定位元素一起使用 。
下面我们分别来看看他们的效果

初始效果


一、static

此时已经添加了距离左边50px的偏移量
来看看效果

是没有移动的。
二、relative（相对定位）
还是这个页面，但此时我们给centent添加了relative（相对定位）

效果如下：

我们可以看到他相对原来位置向右移动了50px的，但是原来的位置依然在。
**三、absolute（绝对定位）
还是中间这块
注：这里在absolute后面文字打错了应该是绝对定位
此时给上了绝对定位：
来看看效果：

这个我们可以看到他已经跑出去了，且原来位置已经被后来居上，这是因为绝对定位果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移。
这样看是不是一目了然呢。
注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。默认情况下是相对可视窗口进行定位的。

再来简单概括一下相对定位和绝对的区别：

1、相对定位的参照物是自己本身所在的位置，绝对定位的参照物的是包含块
2、相对定位是不会脱离文档流的，而且不会对页面的布局产生影响；绝对定位是会脱离文档流的，原来的位置就不在占有的，后面的内容会把位置补上去。
这里根据我们上诉的语句也可以看出来。

四、固定定位（fixed）：
（参照物：始终都是 相对于整个浏览器窗口进行固定定位的）
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备内联块特性）
使块元素默认宽根据内容决定（让块具备内联块的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响不会受到祖先元素的影响。
来看看效果



我们可以看到浏览器窗口是进行的移动下滑的。但我们的蓝框始终在自己原来的位置一动不动。

最后一个粘性定位（sticky）
这个很好理解， 在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。就成了和fixed差不多的一个样式 固定在一个地方不动了 常见于页面的搜索框。

好了，今天的内容就到这里了。有什么不同的见解和建议可以在下方评论共同学习哦！谢谢您的观看！！！