css中常见的定位方式

CSS的四种定位方式（position）

• 静态定位（默认） static
• 相对定位 relative
• 绝对定位 absolute
• 固定定位 fixed

1. 静态定位（默认）

position: static;

2. 相对定位

position: relative;

“相对定位”, 相对的是它原来在文档流中的位置（或者默认位置）.
相对定位下，可以利用 top 和 left 属性相对于元素在文档流中的常规位置重新定位，但是页面上其他元素位置都不变，设置相对定位的元素，其常规位置的空间依然保留着（依然有和原先同样大小的体积）
可以给 top 和 left 属性设定负值，把元素向上、向左移动。

相对定位，可以简单理解为：元素原位置的空间依然保留不被占用，元素移动到页面上的其他位置了，元素在新位置上响应事件。

3. 绝对定位

position: absolute;

绝对定位下，元素从文档流中被“连根拔起”，然后再相对于其他元素（在这里，
是默认的定位上下文 body）定位。但是会随着文档的滚动也一起滚动，所以滚动后该元素可能会滚动到屏幕外。
绝对定位的元素完全脱离了常规文档流，它会相对于顶级元素 body 定位。
绝对定位元素默认的定位上下文是 body 元素，但该上下文可以修改。

绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应祖先元素的 position 设定为 relative 即可。

4. 固定定位

position: fixed;

固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。固定定位适合做悬浮标签效果，页面滚动时始终悬浮在某个特定位置不变。
页面在最顶端时，固定定位和绝对定位的显示效果类似。但是一旦滚动，二者就显现出差异了。
固定定位，常用于创建不随页面滚动而移动的导航元素