CSS五种定位（static、fixed、relative、absolute、sticky ）

最新推荐文章于 2024-04-14 00:45:00 发布

宝子向前冲

最新推荐文章于 2024-04-14 00:45:00 发布

阅读量847

点赞数 5

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_66570642/article/details/130765203

版权

static（静态定位）

fixed（固定定位）

relative（相对定位）和 absolute（绝对定位）

static（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。表示块保留在原本应该在的位置，不会重新定位。不会受到 top, bottom, left, right影响。

position: static;

/*一般不会定义，因为这是默认的*/

fixed（固定定位）

元素的位置相对于浏览器窗口是固定位置。不会随着滚动条的拖动而改变位置，即使窗口是滚动的它也不会移动：
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .l1 {
      background-color: aqua;
      position: fixed;
      width: 100px;
      height: 100px;
      top: 100px;
      left: 100px;
    }
    .l2 {
      width: 300px;
      height: 1200px;
      background-color: pink;
    }
    .l3 {
      background-color: aqua;
      position: fixed;
      width: 100px;
      height: 100px;
      top: 100px;
      right: 100px;
    }
  </style>
  <body>
    <div class="l1">固定定位</div>
    <div class="l2"></div>
    <div class="l3">固定定位</div>
  </body>

relative（相对定位）和 absolute（绝对定位）

先建立三个盒子，一会演示相对和绝对定位的效果

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .l1 {
      background-color: aqua;
      width: 1000px;
      height: 100px;
    }
    .l2 {
      width: 1000px;
      height: 100px;
      left:20px;
      top:20px;
      background-color: pink;
    }
    .l3 {
      background-color: blue;
      width: 1000px;
      height: 100px;
    }
  </style>
  <body>
    <div class="l1">盒子1</div>
    <div class="l2">盒子2</div>
    <div class="l3">盒子3</div>
  </body>

一、相对定位

相对定位元素的定位是相对其正常位置（相对自己原先的位置）。
定位为relative的元素脱离正常的文档流中,但其在文档流中的原位置依然存在,后面的无定位元素仍然不会“挤上来”

将盒子2设置为相对定位

/* 盒子2的CSS添加 position:relative */
 .l2 {
      position: relative;
      top: 20px;
      left: 20px;
      width: 1000px;
      height: 100px;
      background-color: pink;
    }

二、绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器

absolute 定位:完全脱离正常文档流，使元素的位置与文档流无关，因此不占据空间。后面的盒子会补上来
absolute 定位的元素和其他元素重叠。

将盒子2设为绝对定位

/*盒子2的CSS添加 position:absolute */
.l2 {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 1000px;
      height: 100px;
      background-color: pink;
    }