css学习笔记–定位流
相对定位
绝对定位
固定定位
一、相对定位（relative）
1.什么是相对定位
相对自己以前的在标准流的位置移动
示例格式：
position：relative;
left: 30px
top: 50px;
2.注意点：
2.1不会脱离标准流，会继续在标准流中占用一定空间；
2.2在设置样式时，同一方向上（水平或垂直方向）的定位属性只能使用一个；
2.3由于相对定位是脱标的，所以在相对定位中区分块级元素/行内块级元素/行内元素；
2.4在给相对定位元素设置margin/padding等属性时，会影响到标准流的布局（margin属性作用于定位前在标准流中的盒子，而不是相对定位后的盒子）
3.应用场景：
3.1用于元素的微调；
3.2配合后面学习绝对定位来使用；
二、绝对定位(absolute)
1.绝对定位的元素是脱标的；
2.绝对定位的元素不区分块级元素/行内块级/行内元素；
3.绝对定位是相对于body 的定位；
4.绝对定位元素水平居中：
格式：
position: absolute;
left:50%;
margin-left: 元素负的宽度的一半；
规律：
1.默认情况下，绝对定位元素无论有没有祖先元素，它都会以body作为参考点；
2.如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考；即，在祖先盒子中加上属性，position:
注意点：
2.1只要是这个绝对定位元素的祖先元素都可以；
2.2上面指的定位流是指绝对定位/相对定位/固定定位；
3.如果一个绝对定位元素的祖先元素中有多个元素都是定位流，那么这个绝对定位元素会以离他最近的那个定位流的祖先元素作为参考点；
注意点：
1.如果一个绝对定位元素是以body作为参考点，那么其实是以网页首屏（即屏幕显示大小）的宽度和高度作为参考点；而不是以整个网页的宽度和高度作为参考点；
2.一个绝对定位的元素会忽略祖先元素的padding;
相对/绝对定位的区别比较：
1.相对定位弊端：不脱标，在标准流中占用位置；
2.绝对定位弊端：以首屏为body为基准，随着滚动，缩放页面，元素会随着浏览器大小不同变化；
3.两者结合使用：子绝父相
三、固定定位(position: fixed)
1.固定定位元素是脱标的，不会占用标注流中的空间；
2.固定定位和绝对定位一样，不会区分行内，块级，行内块级，可以直接设置宽高；
3.固定定位不会随着浏览器的下拉而改变位置（应用场景例如网页中顶部的导航条，边侧的广告栏，底部的返回图标）
四、z-index属性
1.默认情况下所有元素都有一个默认的z-lndex属性，取值为0；他的作用是专门用于控制定位流元素的覆盖关系；
1.1默认情况下，定位流的元素会覆盖标准流的元素；
1.2默认情况下，定位流的元素后面编写的会覆盖前面编写的（body中）；
1.3如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面（取值可为1，2，3…）；
注意点：
1.如果两个元素的父元素都没有设置z-index元素，那么谁的index属性大，谁就显示在上面；
2.如果两个元素的父元素设置了z-index属性，那么子元素的index属性聚会失效，也就是说谁的父元素的z-index属性谁大谁就会显示在上面；
===笔记内容来自于《从零玩转HTML5前端+跨平台开发》