CSS知识点6

一.定位

定位（position）的几个值：

static，默认值，即使用基于“文档流”的定位

relative，相对定位，即在“文档流”的基础上，结合left和top属性，相对定位

absolute，绝对定位，即脱离“文档流”，并基于它的“包含框”，使用left和top属性来定位

fixed，固定定位，即特殊的绝对定位，即它的“包含框”为浏览器

二.相对定位。

position:relative;

相对定位

注意

        相对与原来的位置，使用left,right进行偏移

        原来的位置对于后继元素的定位(float)依然有效

        对于使用float的元素，realative也同样起作用

示例：

 

 三.绝对定位

position:absolute;

绝对定位

        注意

        绝对定位脱离了”文档流“，

        使用绝对定位时，注意找准”包含框“，即包含该标签，并且距它最近的，position不等于static的标签

        如果没有，那么将以浏览器左上角为准来定位

示例：

 

 四.固定定位

固定定位（fixed）始终相对于浏览器定位

示例：

 

 五.粘性定位

粘性定位（sticky）正常情况下，元素会随着页面滚动，当到达屏幕的特定位置时（设置值），如果用户继续滚动，它就会“锁定”在这个位置。

比如淘宝右侧的回顶部就是粘性定位

示例：

 

 

 定位的相同点是 都结合left、right、top、bottom的值修改位置。