css定位position

定位

总结写在前边：

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否（占有位置）	相对于自身位置移动	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占有位置）	浏览器可视区域	常用
sticky粘性定位	否（占有位置）	浏览器可视区	当前阶段少用

  将盒子定位到某一位置

  定位=定位模式+边偏移

1.定位模式

  决定了元素的定位方式，他通过css的position来设置，分为四个值。

                static 静态定位

                relative 相对定位

                absolute 绝对定位

                fixed 固定定位

2.边偏移

  边偏移就是定位的盒子移动到的最终位置。有top、bottom、left、right 4个属性

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素上边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

3.静态定位

  静态定位是元素的默认定位方式，无定位的意思

  语法：

  选择器 { position:static; }

• 静态定位按照标准流特性摆放位置，他没有边偏移
• 静态定位在布局中很少使用

4.相对定位

  相对定位是元素在移动位置的时候，是相对于大原来的位置来说的

  选择器 { position:relative; }

相对定位的特点：

                （1）它是相对于自己原来的位置来移动的（移动位置的时候参照的是自己原来的位置）

                （2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保持原来的位置 例如：兄弟元素为标准流，则会考虑它的位置）

                因此，相对定位并没有脱标，他最 典型的应用就是给绝对定位当父盒子的

  5.绝对定位

  绝对定位是元素在移动位置的时候是相对于它祖先元素来说的

  选择器 { position:absolute; }

  绝对定位的特点：

                （1）如果没有祖先元素或者祖先元素没有定位，则是以浏览器的文档来定位对齐的

                （2）父级元素有定位情况（相对定位、绝对定位、固定定位），子元素则最近一级有定位祖先元素为参考点进行移动定位

                （3）绝对定位不会在占有原来的位置（脱标，不会保持原来的位置 例如：兄弟元素为标准流，则会忽略它原有的位置）

  6.子绝父相的由来

                子元素是绝对定位的话，父级元素要用相对定位

                （1）子元素绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

                （2）父盒子需要加定位限制子盒子在父盒子内显示

                （3）父盒子布局时，需要占有位置，因此父亲只能是用相对定位

  7.固定定位 fixed

                固定定位是元素固定主语浏览器可视区的位置。主要应用场景：可以在浏览器页面滚动时保持元素的位置不变

  语法：

 选择器 { position:fixed; }

                固定定位的特点:

                （1）以浏览器的可视窗口为参照点移动位置

• 与父元素没有任何关系
• 不会随着滚动条滚动

（2）固定定位不占有原先的位置

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

固定定位小技巧 ：固定在版心的右边

  小算法：

                1.让固定定位的盒子left：50%；，走到浏览器可视区的一半位置

                2.让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一般距离就可以让固定定位的盒子贴着版心右侧对齐了

8.粘性定位 sticky

  粘性定位可以被认为是相对定位和固定定位的混合。 sticky粘性的

语法：

  选择器 { position:sticky; }

粘性定位的特点

                1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

                2.粘性定位占有原先的位置（不脱标）

                3.必须添加top、left、right、bottom其中的一个才会有效

跟页面滚动搭配使用，兼用性差，IE不支持。