在了解定位属性的使用场景之前，我们先来学习定位的几个属性值分别是什么意思以及一些注意点，定位的使用场景穿插在这些内容里面。希望大家学到的东西要回熟练的运用起来。

大家先考虑下面情况使用标准流以及浮动是否能实现吗？

很明显，以上效果，在标准流和浮动都无法快速实现，此时需要定位来实现。

浮动和定位的两者比较：

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式决定元素的定位方式，它通过CSS的position属性来设置：

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

静态定位是元素的默认方式，即按照标准流来摆放，无定位的意思。

语法：

特点：

相对定位是元素在移动位置的时候，是相对于它自身原来的位置而言的。

语法：

看下图理解特点： 相对定位的特点(务必记住)：

绝对定位是元素在移动位置时，相对于它祖先元素作为参考系。

语法：

看下图(使用场景)： 绝对定位的特点(务必记住)：

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

固定定位的特点： 1. 以浏览器的可视窗口为参照系移动元素。 2. 跟父元素没有任何关系。 3. 不随滚动条滚动。 4. 固定定位不占有原先的位置。

固定定位定位在页面版心如图： 那么我们如何快速给“固定位置的小按钮定位呢？” 固定定位定位在页面版心的小技巧：

这样就可以让固定定位的盒子贴着版心右侧对齐了。

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

语法：

粘性定位的特点：

缺点：兼容性差，IE不支持

使用场景：当滚动条到达某一位置时，这个粘性定位的容器才不随滚动条移动而移动。

使用场景就是四个字：子绝父相

即：子元素使用绝对定位，父元素使用相对定位。

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

看下图理解子绝父相:

到此，你是否明确知道子绝父相的用法了呢？

小结：学习定位务必区别两大特点：1.是否占有原先位置(是否脱标) 2.以谁为参考系移动位置