position
依据学习别人的材料，本人整顿下笔记，坚固下css中五种定位形式知识点，温故知新，一直在工作中晋升自我。
position 属性的五个值：
- static
- relative
- fixed
- absolute
- sticky（粘性定位）
上面间接上图和代码举例：
static
html外面所有元素的position的默认值都是static，static会追随html排版的流程挪动。static对于top，left，right，bottom设定值不会失效。
比方我在static的div下面放了一个高度120px的div，则static属性div会被挤下去。
<div class="height"></div><div class="static"></div>.static{ position:static; width:360px; height:360px;}.height{ width:750px; height:120px;}absolute
相对定位，元素会它最近的一个父类容器去定位，该父类容器position的值必须是：relative、absolute、fixed，若没有这样的父元素，则该元素会绝对于body进行定位。
相对定位偏移值由其top、bottom、left、right值确定。
而相对定位的元素若超出其父元素的边界，要想将溢出的局部暗藏，则想暗藏在哪个父类里，该父类必须同时设置position为relative/absolute/fixed中一种，并且overflow须要设定为hidden。
看以下例子：
<div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="absolute"></div>.height{ width:750px; height:120px;}.absolute{ position:absolute; width:240px; height:240px; right:80px; bottom:60px}从上图看，absolute定位并不会受到到height元素排版影响。
咱们在多复制几份height元素，让页面呈现滚动轴，这时候会发现absolute元素会随滚动轴滚动。
另外，如下图，如果咱们把absolute元素嵌套入absolute元素中，则最里层的div会依据父层的absolute元素的地位去定位。正好印证了下面说的元素会它最近的一个父类容器去定位，该父类容器position的值必须是：relative、absolute、fixed，若没有这样的父元素，则该元素会绝对于body进行定位。
<div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="absolute"> <div class="absolute"></div></div>relative
relative和static很类似，都会追随html排版流程挪动，但它比static多了top，left，right，bottom的设定。即它是追随html排版流程定位之外，还会透过top，left，right，bottom去调整地位。以下举例：
<div class="height"></div><div class="relative"></div>.height{ width:750px; height:120px;}.relative{ position:relative; width:360px; height:360px; top:60px; left:150px;}从上图高深莫测，relative元素追随了height的排版而浮动了，并且依据top和left来进行定位。
减少了一个div，relative元素向下挪动。
<div class="height"></div><div class="height"></div><div class="relative"></div>relative最重要一个性能就是在他外面的子元素，如果定位形式是absolute，则子元素会依据relative的地位去定位。
<div class="height"></div><div class="height"></div><div class="relative"> <div class="absolute"></div></div>.height{ width:750px; height:120px;}.relative{ position:relative; width:360px; height:360px; top:60px; left:150px;}.absolute{ position:absolute; width:240px; height:240px; right:80px; bottom:60px;}从这张图看，咱们会发现absolute子元素的right和bottom是依据relative元素的地位去定位的。这在平时我的项目中十分罕用。
而如果你将relative元素替换为static，则会发现absolute元素齐全忽视static元素。
<div class="height"></div><div class="height"></div><div class="static"> <div class="absolute"></div></div>.height{ width:750px; height:120px;}.static{ position:static; width:360px; height:360px;}.absolute{ position:absolute; width:240px; height:240px; right:80px; bottom:60px;}fixed
fixed和absolute很类似，不同中央有两点：
- fixed会定位到屏幕中的固定地位，所以即便滚动页面，fixed也会始终放弃在那个地位。
- 如果fixed元素设定了top，left，right，bottom属性，那么它即便放在relative外面，fixed也会依据页面，即body去定位，而不会依据relative元素去定位。
<div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="fixed"></div>.height{ width:750px; height:120px;}.fixed{ position:fixed; width:240px; height:240px; left:80px; bottom:60px;}先看下图，咱们把fixed元素嵌套入relative元素中，并没设定top，left，right，bottom属性，这时候fixed元素会依据父元素relative排版
<div class="height"></div><div class="relative"> <div style="background-color:red;width:50px;height:50px;position:fixed" ></div></div>.height{ width:750px; height:120px;}.relative{ position:relative; width:360px; height:360px; top:60px; left:150px;}而一旦fixed元素设定了top，left，right，bottom属性，那么它即便放在relative外面，fixed也会依据页面，即body去定位，而不会依据relative元素去定位
<div class="height"></div><div class="relative"> <div style="background-color:red;width:50px;height:50px;position:fixed;top:50px;left:10px;" ></div></div>sticky（粘性定位）
sticky 是css定位新增的一个属性；能够说是绝对定位relative和固定定位fixed的联合；
它次要用在对scroll事件的监听上，简略说在滑动过程中，某个元素的间隔其父元素的间隔达到 sticky 粘性定位 要求时；
position:sticky 这时的成果就绝对于 fixed 定位，固定到适当的地位。
如图，咱们多增加height元素，并直至呈现滚动轴。
<div class="height"></div><div class="height"></div><div class="sticky"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div>.height{ width:750px; height:120px;}.sticky{ position:sticky; width:240px; height:90px; top:0;}当咱们滑动滚动轴页面上移后，当sticky元素触到页面顶部时候，就会固定在顶部。固定到顶部起因是咱们将他的top设定为 0。所以当top与上方相间隔0px时就会触发。如下图：
sticky粘性定位能够较少代码实现弹性固定场景，比方导航栏。然而兼容性来看，因为是css新属性，目前还比拟差。咱们能够参考以下浏览器兼容性图发现，浏览器也是从2014年开始缓缓反对的
对于css中定位的五种形式就介绍结束了。
最初很感激B站Codingstartup的Steven学习视频。依据他的视频和素材联合我本人了解整顿的笔记，用来在工作中一直坚固和晋升本人。