关于学习position定位的理解和总结

关于对css中定位一些理解和总结思路，记录我的学习之路

了解定位之前，要理解标准文档流

1. 标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。
2. 一般在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素，块级元素是从上到下一行一行的排列。
3. 默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列。
4. 行内元素是在一行中水平布置，从前到后的排列；span,strong等属于行内元素。
5. 定位中的absolute、fixed都让元素脱离文档流，就可以层叠

定位的属性(position)

定位主要分4种，熟练的使用能够对页面美化布局有着很好的帮助。

定位分为四种定位：

静态定位
相对定位
绝对定位
固定定位

position属性值有static、relative、absolute和fixed，其中relative和absolute两种定位方式是网页制作中经常使用的。

静态定位(static)

1. position 默认的值，实际上在我的理解里好像没有什么作用，就是单单的默认词。
2. 在页面布局是没有任何作用
3. 属于标准流，不能偏移
   没有定位,以标准文档流显示

相对定位(relative)

1. 相对定位很好用，不能层叠

2. relative属性值
   相对自身原来位置进行偏移
   偏移设置：top、left、right、bottom
   可以用left来描述盒子向右移动；
   可以用right来描述盒子向左的移动；
   可以用top来描述盒子向下的移动；
   可以用bottom来描述盒子的向上的移动；
   如果是负数就是相反的方向

3. 相对定位的盒子，不脱离标准流，原有的位置保留不变，其后的元素不能占用其原有位置。

4. 相对定位的主要用途是作为其内部元素绝对定位时的参照标准，有相对于我的含义。

效果图

绝对定位(absolute)

1. 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。简单来说，就是要使用绝对定位的话，要去父级寻找定位，如果没有的话，他会往父级的父级的寻找定位，要是都没有定位，就会以浏览器窗口为参照物，一般使用绝对定位要是想以父级为参照物的话，父级没有定位就要给父级添加一个相对定位作为参照物。

2. 绝对定位的元素从标准文档流中脱离，其后的元素会占据其原有的位置。

3. 在使用绝对定位时要想实现水平居中方法：

   left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
   margin-left: -100px;：让盒子向左移动自身宽度的一半。
   定位的秘籍——子绝父相：子级绝对定位，父级相对定位

效果图

固定定位(fixed)

7. 它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动，完全不占位置，脱离标准文档流，相对于浏览器定死在调边偏移属性的位置，和绝对定位比较相近
8. 一般常用于固定头部导航栏，底部或者左右的侧边栏

说完定位了就要说一下z-index这个属性，和绝对定位经常配合的一个常用属性
调整元素定位时重叠层的上下位置：

1. z-index属性值：整数，默认值为0
2. 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
3. z-index值大的层位于其值小的层上方
   如图
   
   z-index的应用
   网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。
   改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可。

总结

固定定位

1. 参照物：浏览器窗口
2. 固定定位后，元素会脱离文档流，变成行内块元素
3. 不占位置
4. 一定要设置坐标值

相对定位

1. 参照物：元素本身
2. 相对定位后，元素还占位置，不脱离文档流

绝对定位

1. 参照物：会往父级逐个查找定位，如果父级都没有定位，就会以浏览器窗口为参照物
2. 绝对定位后，元素脱离文档流，变成行内块元素