Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【CSS】定位类型与原理：相对定位-绝对定位-固定定位-粘性定位
Blogger Information
Blog 94
fans 0
comment 0
visits 92704
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【CSS】定位类型与原理：相对定位-绝对定位-固定定位-粘性定位
可乐随笔
Original
560 people have browsed it

定位类型

  • 相对定位：position:relative,相对定位,元素仍在文档流中,受文档布局限制(源码顺序),只是相对原始位置发生了偏移而已。
  • 绝对定位：position:absolute,总是相对于一个固定的定位参考父级,父级中找不到定位元素，就继续向上找，直到html。
  • 固定定位：position:fixed,不是相对父级，总是相对于html定位(看成绝对定位的一个特例)。
  • 粘性定位：position:sticky = static + fixed 粘性定位 = 静态定位 + 固定定位。常用来做浮动置顶。

参考代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>定位的类型与原理</title>
  8.   </head>
  9.   <body>
  10.     <!--
  11.       ! 定位布局
  13.       * 1. 定位三个必知术语: 定位元素, 最初包含块(定位上下文/html), 参照物
  14.         (1). 定位元素: position: relative / absolute / fixed
  15.         (2). 最初包含块: 包含了<html>的不可见的,但可感知的区块,大多场景下与"视口"表现一致,但并不相同
  16.         (3). 参照物: 自身, 祖先定位元素, 最初包含块
  18.       * 2. 页面坐标系
  19.         (1) 与数学坐标每系不同
  20.         (2) 以左上角为起始点,坐标(0,0)
  21.         (3) 向右, X 变大, 向下, Y 变大
  22.         (4) 页面四个顶点用: top,left,right,bottom表示
  24.       * 3. 定位类型: 相对, 绝对, 固定, 默认静态
  25.         (1). 相对定位: position: relative
  26.         (2). 绝对定位: position: absolute
  27.         (3). 固定定位: position: fixed
  28.         (4). 静态定位: position: static (浏览器默认,即文档流布局)
  30.       * 4. 定位元素:
  31.         (1): 定义: 也叫"可定位元素",即可以在文档流中自定义元素的排列方向
  32.         (2): 属性: position: relative / absolute / fixed,即 非static即可
  34.       * 5. 定位参照物:
  35.         (1): 相对定位: 相对于"自身在文档流中的位置"
  36.         (2). 绝对定位: 相对于"距离它最近的定位元素的位置",即常说的"定位父级",逐级向上直到最初包含块
  37.         (3). 固定定位: 总是相对于"最初包含块"定位
  38.     -->
  40.     <!-- 1. 相对定位 -->
  41.     <div class="box box1">
  42.       <div class="item relative">相对定位</div>
  43.       <div>Hello</div>
  44.     </div>
  45.     <style>
  46.       .box {
  47.         border: 1px solid #000;
  48.         height: 200px;
  49.         width: 200px;
  50.         background-color: lightcyan;
  51.       }
  52.       .item {
  53.         height: 50px;
  54.         width: 100px;
  55.         border: 1px solid #000;
  56.       }
  57.       /* 相对定位 */
  58.       .box.box1 .item.relative {
  59.         background-color: lightgreen;
  60.         /* 默认静态定位 */
  61.         position: static;
  62.         /* 将文档流中的元素转为"定位元素"  */
  63.         /* position: 只要不是static; */
  64.         position: relative;
  65.         top: 20px;
  66.         left: 20px;
  67.         /* 相对定位,元素仍在文档流中,受文档布局限制(源码顺序) */
  68.         /* 只是相对原始位置发生了偏移而已 */
  69.       }
  70.     </style>
  71.     <hr />
  72.     <!-- 2. 绝对定位 -->
  73.     <div class="box box2">
  74.       <div class="item absolute">绝对定位</div>
  75.     </div>
  76.     <style>
  77.       .box.box2 .item.absolute {
  78.         background-color: wheat;
  79.         /* 绝对定位 */
  80.         position: absolute;
  81.         /* 定位偏移量 */
  82.         top: 20px;
  83.         left: 20px;
  85.         /* 绝对定位元素,总是相对于它的祖先定位元素进行定位 */
  86.         /* ! 因为父级没有定位元素,所以逐级向上查询,直到html  */
  87.       }
  89.       /* 我们将它的父级转为定位元素 */
  90.       .box.box2 {
  91.         /* 实际工作中, relative用得极少, 除了当定位参考父级 */
  92.         position: relative;
  93.         /* position: absolute; */
  94.       }
  96.       /* 垂直水平居中 */
  97.       .box.box2 .item.absolute {
  98.         top: 0;
  99.         left: 0;
  100.         right: 0;
  101.         bottom: 0;
  102.         margin: auto;
  103.       }
  105.       /* .box.box2 .item.absolute {
  106.         transform: translate(25%, 75%);
  107.       } */
  108.     </style>
  109.     <hr />
  110.     <!-- 3. 固定定位 -->
  111.     <div class="box box3">
  112.       <div class="item fixed">固定定位</div>
  113.     </div>
  115.     <style>
  116.       .box.box3 .item.fixed {
  117.         background-color: violet;
  118.         width: 100vw;
  120.         /* 固定定位,总是相对于一个固定的定位参考父级,html  */
  121.         position: fixed;
  122.         /* top: 0;
  123.         left: 0; */
  124.         right: 0;
  125.         bottom: 0;
  126.       }
  128.       .box.box3 {
  129.         /* 固定定位不是相对于父级 */
  130.         position: relative;
  131.       }
  133.       /* 适合于做固定位置的导航, 楼层, 客服 */
  134.       body {
  135.         height: 2000px;
  136.       }
  138.       /**
  139.        *
  140.        * 1. 相对定位: 静态定位的特例,还在文档流
  141.        * 2. 绝对定位: 相对于具有定位属性的祖先元素定位
  142.        * 3. 固定定位: 总是相对于html定位(看成绝对定位的一个特例)
  143.        *
  144.        */
  145.     </style>
  146.   </body>
  147. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post