定位

定位属性和属性值

属性：position

属性值：

static （默认值）静态定位，设置和不设置效果一样

relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘性定位 -css新增的属性

相对定位

属性：position

属性值：relative

定位的方向值都四个方向top，right，bottom，left

方向值的用法：数值+单位（正数，复数都可以）

参照物是元素本身的初始位置

相对定位不会让元素脱离文档流 初始位置依然存在于正常页面中

作用：相对定位的作用是给绝对定位提供参照物的

绝对定位

属性：position

属性值：absolute

绝对定位的参照物（父相子绝）

如果父级没有定位的情况下 子级就会一直往上级查找 如果上级也没有的话就会找到浏览器

如果父级有定位的情况下 那么就会相对于父级进行定位

绝对定位是会脱离文档流（初始位置不存在）

作用：

父级设置相对定位（位置不会有影响） 子级设置绝对定位

绝对定位建议只在小的布局区域使用

固定定位

属性：position

属性值：fixed

常见的用法：网页上的登录，聊天窗口，广告

固定定位是相对于浏览器进行位置上的偏移

固定定位是脱离文档流的 初始位置就不存在了

粘性定位（了解，兼容性问题多）

属性：position

属性值：sticky

粘性定位是固定定位（绝对定位）和相对定位的结合

固定（绝对）定位 相对于浏览器

相对定位 不脱离文档流

注意点：

兼容性差，

bug多

定位的总结

1.静态定位，相对定位，绝对定位，固定定位，粘性定位

2.相对定位

相对于初始位置

不脱离文档流

3.绝对定位

如果父级有定位属性就相对于父级进行偏移

如果父级没有定位，属性就一直往上级查找，指导找到浏览器

脱离文档流

4.固定定位

相对于浏览器进行位置偏移

脱离文档流

5.粘性定位

结合了固定定位和相对定位的特点

了解，不做使用

注意

脱离文档流定位的有 固定和绝对

不脱离文档流的定位有 相对

锚点连接

在a标签内有一个href属性 #id属性值

在跳转的地方设置一个id属性，设置id属性值

注意：

固定用法：不可以用class 只能用id

页面只能有一个id 如果有多个按钮就可以设置多个id了