跳至主要內容

定位

定位

作者：IT王小二

博客：https://itwxe.com

定位用于灵活控制盒子在网页中的位置，分为相对定位，绝对定位，固定定位。

/* 相对定位 */
position: relative;
/* 绝对定位 */
position: absolute;
/* 固定定位 */
position: fixed;

相对定位

让元素相对于自己原来的位置，进行位置调整，并且不脱离标准流，元素还在原地，不会被别的元素覆盖，显示模式特点保持不变 设置边偏移则相对自己原来位置移动；简单来说就是人在其位，元神出窍，哈哈。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box1 {
      /* 相对定位，相对于自己原来的位置 */
      position: relative;
      /* 向右偏移100px */
      left: 100px;
      /* 向下偏移200px */
      top: 200px;
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }

    .box2 {
      width: 200px;
      height: 200px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

相对定位

偏移可以理解为都是边的偏移。

  • left：盒子右移
  • right：盒子左移
  • top：盒子下移
  • bottom：盒子上移

PS：负数表示相反的方向。

相对定位通常用于1）微调元素位置，2）做绝对定位的参考。

绝对定位

通常用于在父级相对定位盒子里面做绝对定位，做压盖效果等。

会脱离标准文档流，不会占用原来的位置，显示模式具备行内块特点，一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素为参考点，没有则相对浏览器可视区改变位置。

例如我们需要使用绝对定位配置相对定位来做一个右上角热门标识的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father-box {
      /* 相对定位，相对于自己原来的位置 */
      position: relative;
      /* 向右偏移100px */
      left: 100px;
      /* 向下偏移200px */
      top: 200px;
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }

    .son-box {
      position: absolute;
      left: 155px;
      top: 20px;
      width: 50px;
      height: 16px;
      border: 1px solid blue;
      font-size: 14px;
      text-align: center;
      line-height: 16px;
    }
  </style>
</head>
<body>
  <div class="father-box">
    <div class="son-box">Hot</div>
  </div>
</body>
</html>

绝对定位

固定定位

用于设置相对浏览器窗口进行定位，无论页面如何滚动，这个盒子显示的位置不变，例如我们常见的返回顶部和顶部导航栏。

.nav {
  /* 固定定位 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
}

堆叠层级

用于设置定位元素的层级顺序，改变定位元素的显示顺序。默认效果按照标签书写顺序，后来者居上，使用 z-index 设置，默认值为 auto，取值越大，层级越高。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS</title>
  <style>
    div {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
    }

    .box1 {
      background: pink;
      z-index: 1;
    }

    .box2 {
      background: dodgerblue;
      z-index: 2;
    }

    .box3 {
      background: orangered;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>
</html>

堆叠层级