css定位

85 阅读1分钟

position一共有5种

  • static 默认
  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位
  • sticky 粘性定位

区别

1.static

默认的定位方式,没写positon时就是static,此时设置left,right,top,bottom无效

2.relative

  • 基于默认位置即static的位置进行偏移

  • 元素所占的空间还保留在原位不会被其他元素所挤占,即还在正常文档流中

3.absolute

  • 基于他的包含块进行偏移(他外层的第一层出现定位的元素的padding区域)

  • 一般配合relative使用,如果没有设置就根据html为基点进行偏移

  • 会使元素脱离标准文档流,他所占的空间会被其他元素所挤占,然后他会盖在挤占他元素的上面

4.fixed

  • 相对于浏览器视口进行偏移,无论页面如何滚动都会固定在一个位置
  • 会脱离文档流,宽高根据内容变动

5.sticky

相当于relative+fixed

在设置的一定位置成为固定定位,其他时候处于正常文档流

其他

z-index设置z轴偏移,数值越大越上方

sticky设置会失效