欢迎光临
我们一直在努力

CSS | CSS定位知识总结补充

课程目标

  • 学习CSS中的定位模型
  • 使用定位模型来达到布局目的

Position: static

静态定位/常规定位/自然定位 ——定位中的一股清流-回归本真

作用:使元素定位于常规/自然流中(块、行垂直排列下去、行内水平从左到右)

特点:

  • 忽略top、bottom、left、right或者z-index声明
  • 两个相邻的元素如果都设置了外边距(margin),那么最终外边距=两者外边距中最大的
  • 具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中

Position: relative

相对定位

作用:使元素成为可定位的祖先元素(containing-block)

特点:

  • 可以使用top、right、bottom、left、z-index进行相对定位(自身)
  • 相对定位的元素不会离开常规留(空间会被留下)
  • 任何元素都可以设置relative,它的绝对定位的后代都可以相对于它进行绝对定位(常用)
  • 可以使浮动元素发生偏移,并控制它们的堆叠顺序(z-index)

Position: absolute

绝对定位

作用:使元素脱离常规流

特点:

  • 脱离常规流
  • 设置尺寸要注意:百分比是相对于最近定位的祖先元素
  • lrtb如果设置为0,(不设置宽高的情况下)他将对齐到最近定位祖先元素的各边
  • lrtb如果设置为0,并设置margin: auto auto;可以使其居中
  • lrtb如果设置为auto,他将会被打回原形
  • 如果没有最近定位祖先元素,那么body就是他的祖先元素

Position: fixed

固定定位

作用:与绝对定位相似

特点:

  • 一般相对于浏览器窗口定位
  • 固定定位元素不会随着视口滚动而滚动
  • 继承absolute特点

Position: sticky

磁贴定位/粘性定位/吸附定位

作用:relavtive+fixed的完美结合,制造出吸附效果

特点:

  • 如果产生偏移 原位置还是会在常规流中
  • 如果它的最近祖先元素有滚动 那么它的偏移标尺就是最近的祖先元素
  • 如果最近祖先元素没有滚动 那么它的偏移标尺是视口
  • 上下左右的偏移规则
赞(1) 打赏
未经允许不得转载:散人研 » CSS | CSS定位知识总结补充
分享到: 更多 (0)

评论 抢沙发

5 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏