CSS定位

定位是什么

  • 定位是排版页面元素的一种方式
  • 这种方式的特点是精确控制元素的位置
  • 只有定位布局可以做到精确控制元素的位置

定位的分类

相对定位

  • 相对定位是参照自身位置定位

绝对定位

  • 绝对定位是参照父级定位

固定定位

  • 固定定位是参照浏览器窗口定位

定位参照物

相对定位是参照自身位置定位

绝对定位是参照父级定位

固定定位是参照浏览器窗口定位

1、相对定位的实现步骤

  • 第一步:为要定位的元素添加position:relative
  • 第二步:设置坐标:left | top | right | bottom

2、绝对定位的实现步骤

  • 第一步:为要定位的元素添加position:absolute
  • 第二步:设置定位的坐标:left | top | right | bottom
  • 第三步:设置定位父级:position:relative

如果不设置定位父级,那么定位父级就是文档(body)

3、固定定位实现步骤

  • 第一步:为要定位的元素添加position:fixed
  • 第二步:设置定位坐标:left |top | right | bottom
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 来源于视频教程: https://www.bilibili.com/video/BV14J4114768?p=23...
    那时青荷_e26a阅读 161评论 0 0
  • 2020-09-13 学习目标 能够说出为什么要用定位 能够说出定位的4种分类 能够说出4种定位各自的特点 能够写...
    皮皮章阅读 287评论 0 0
  • 仅供学习,转载请注明出处 文档流 文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一...
    Devops海洋的渔夫阅读 16,794评论 0 16
  • 一.定位 1. 定位的组成 定位 = 定位模式 + 边偏移 定位: 将盒子定在某一个位置(定位就是摆盒子 按照定位...
    月亮____阅读 194评论 0 2
  • 每天都累的要死,但只要想着能做出来东西,就很开心~ 文章内容输出来源:拉勾教育大前端就业集训营 1.定位属性 概述...
    Liyager阅读 306评论 0 2