position定位及小案例

一.position定位和float浮动的区别
浮动(float)主要是解决左右排列的问题，定位(position)则主要是解决叠加排列的问题，设置对象的定位方式，可以让布局层位置容易绝对定位，控制盒子对象位置更加准确。
二.position语法与结构
① 语法：position：static(默认)/relative(相对定位)/absolute(绝对定位)/fixed(固定定位)/sticky(黏性定位)
② 属性值的语法含义：

• position:static;（是默认值）对于定位边偏移不起作用，常用于取消定位。

• position:relative;（是相对定位）如果没有定位偏移量，对元素本身无影响；不是元素脱离文档流，所占空间会被保留；不影响其他元素布局；且每次移动以自己的左上角为基点进行移动，即相对自身移动。

• position:absolute;（是绝对定位）使元素脱离文档流；使内联元素支持宽高(让内联具备块特性)，即给内联加高，宽度由内容决定；使块元素默认宽根据内容决定(块具备内联特性)；如果有定位祖先元素(即给对应的父容器或更外层容器定位relative/absolute)，则相对于定位祖先元素发生偏移，注：如果没有定位祖先元素，则相对于整个文档进行偏移，如果各层级都有定位祖先元素，则采用就近元素(即子绝父相)，相对定位父级移动。

• position:fixed;(是固定定位)使元素脱离文档流；使内联元素支持宽高(让内联具备块特性)，即给内联加高，宽度由内容决定；使块元素默认宽根据内容决定(块具备内联特性)；相对于整个浏览器窗口进行偏移，不受浏览器窗口滚动条的影响，不会受到祖先元素的影响；固定定位一定要写宽和高(除非有内容撑开盒子)。

• position:sticky;(黏性定位)，在没有到达指定位置的时候，是没有效果的(前期受滚动条的影响)，当到达指定位置后，就变成了固定模式(此时不再受滚动条的影响)。

• 定位的偏移量：left/right/top/bottom,其值可以是具体数值，也可以是百分比(百分比是根据相对容器的宽高来说的)，定位的偏移量不能单独使用，必须得配合定位模式。

• 定位层级：z-index:1/2/3…;嵌套时候的层叠问题，默认层级为0，比较时，会先与同级优先比较，数字越大优先级别越高，但必须得配合定位模式来使用(只有相对定位、绝对定位、固定定位才有这种属性)。
  三.在使用position中的一些用法和注意事项

• ①绝对定位和固定定位会将元素转换为行内块元素，因此设置绝对定位和固定定位后就不需要在转换模式了。

• ②有时候一个布局中有好几个对象，不易用边距padding、margin进行相对定位时，就可以使用绝对定位来轻松搞定。

• ③绝对定位与float浮动不能同时使用(比如一个大盒子里有的是绝对定位，有的是float浮动定位)。

• ④绝对定位的使用通常是父级定义position:relative;子级定位position:absolute;然后子级使用left/right/top/bottom进行绝对定位，比如在网页实际使用中，父盒子如果使用绝对定位，就会产生浮动效果，也就是说在父盒子下的内容会被顶上来，导致网页出现变化。

• ⑤且给某个容器进行position:relative;相对定位时，绝对定位通常最好再定义它的边偏移left/right/top/bottom（left/right和top/bottom在一个对象中分别只能选一种定义）

• ⑥position:absolute;绝对定位如果父级不使用position:relative;，而直接使用position:absolute;绝对定位，这个时候将会以body标签为父级，使用position:absolute;定义对象无论位于div多少层结构，都将会被拖出以为父级(参考级)进行绝对定位。

• ⑦因为定位会将元素转为行内块元素，而内联块元素的宽是根据内容决定的，当想让其宽跟相对定位容器或浏览器一样时，则需设置width:100% 。

• ⑧在平时的情况下，如果对盒子添加margin:0 auto;会使得盒子水平居中，但是当有float或者position属性时，margin的居中就会失效，此时就要用其它方式来让盒子居中了。
  水平居中：即让绝对定位的盒子占相对定位容器的一半(left:50%😉,再让盒子向左走自己盒子长度的一半(margin-left:xxxpx;或者是transform:translateX(-50%)😉
  垂直居中：top:50%;和margin-bottom:xxxpx;(transform:translateY(-50%)😉
  内部居中：left:0;top:50%;margin:xxxpx;

  四.实例讲解
  1.右侧固定菜单
  ①效果图
  
  ②html
  
  ③css
  
  2.摩天轮
  ①效果图
  
  ②html
  
  ③css