记笔记，css之position(1)

定位组成：定位模式+边偏移

定位模式：定位方式

边偏移：决定最终的位置

• 定位模式

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

• 边偏移

top	top:80px	顶端偏移量：定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	底部偏移量：定义元素相对应其父元素下边线的距离
left	left:80px	左侧偏移量：。。。。左边线的距离
right	right:80px	右侧偏移量：。。。。右边线的距离

这四个属性只有定位中才有

子绝父相的由来？子级用绝对定位，父级用相对定位

因为父级元素需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

1. 静态定位：默认定位方式，无定位的意思。标准流，很少使用！
2. 相对定位：相对于其原来的位置的定位（自恋型），移动位置的时候参照点（原来盒子的左上角）是自己原来的位置，原来位置继续占有继续保留！！！应用：给绝对定位当“die”
3. 绝对定位(重要)：相当于其祖先元素（拼die型）
   1. 若没有祖先元素或者祖先元素没有定位，则以浏览器定标准定位（浏览器窗口）（document文档）   
   2.   若父级元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
   3. 不占用原有位置（脱离标准流的）
4. 固定定位：固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

               1.以浏览器的可视窗口为参考点移动元素

                2.跟父元素没有任何关系

                3.不随滚动条滚动而滚动

                4.不占有原来的位置

固定在版心右侧位置显示！！

算法：

        left：50%，走到可视区一半的位置

        margin-left:版心宽度的一半距离

5.粘性定位：可被认为是相对定位和固定定位的混合。（使用少）

特点：以浏览器的可视窗口为参照点移动元素（固定定位特点）、粘性定位占有原来的位置（相对定位特点）、必须添加top、left、bottom、right其中一个才有效。

• 定位的叠放顺序

z-index:数值越高，上面。

• 绝对定位的盒子水平居中：先定位left：50%，然后margin-left=-盒子宽度的一半
• 绝对定位的盒子垂直居中：道理类似。
• 没有定位的水平居中使用：margin:auto。

行内元素添加绝对或固定定位，可以直接设置高度或宽度

块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小。

脱标的元素不会触发外边距合并的问题。