css之关于定位的理解

一.为什么有定位

三种布局标准流，浮动，定位。定位能够解决浮动不能解决的问题，定位可以去你任何你想去的地方

二.定位的构成

定位由定位模式和边偏移两部分组成。定位=定位模式+边偏移。

边偏移主要有top，bottom，left，right四部分组成，单位是px。

三.四种定位模式position

下面重点说明相对定位和绝对定位

1.static静态定位

静态定位就是一般的定位，当position=static时，可以消除其他定位，就是各元素在HTML文档流中的默认位置。

2.相对定位

相对定位以自身左上角为参考点进行移动，值得注意的是相对定位占据位置，这与float的特点相反。

3.绝对定位

首先绝对定位不占位置，跟float一样，其次参考系的选择，如果有父亲且父亲有定位则以父亲或其祖先如爷爷作为参考系，如果长辈没有定位则所看到的浏览器窗口为准，这里的定位指的是relative和absolute。

有一个口诀叫“子绝父相”说的一般是子类绝对定位，父类相对定位。这么说是有道理的，因为如果父亲绝对定位，那么可能以浏览器窗口为参考系，且绝对定位不占据文档流，就可能影响了父亲元素外面的元素。如果儿子是相对定位，相对定位占据文档流，没有像绝对定位那样完全脱离文档流，也会影响其他元素。

4.固定定位

下面图片是网上的资料