CSS定位_css左边距-CSDN博客

本文链接：https://blog.csdn.net/clmm_/article/details/141891109

定位介绍

可以通过边偏移，灵活改变盒子在网页中的位置。

例如图中左右箭头的小图标，是覆盖在底图上的，这种实现就需要用到定位模式

需要注意的是，这里的偏移量。例如left:50px，就是设置当前盒子到达父级盒子左侧的距离为50px，其他的以此类推。

相对定位

相对定位：保持在文档流中，位置相对于其原始位置（自己）偏移。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    div {
      position: relative;
      top: 100px;
      left: 120px;
    }
  </style>
</head>

<body>
  <p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    11111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    11111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
  </p>

  <div><img src="./apple.jpg" alt=""></div>

  <p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    11111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    11111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
  </p>

</body>

</html>

装图片的盒子

特点：

1.改变位置的参照物是自己原来的位置

2.不脱标，占位
3.标签显示模式特点不变

绝对定位

绝对定位：脱离文档流，位置相对于祖先元素或 <html>。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 50px;
    }

    .box2 {
      width: 300px;
      height: 300px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div>
    <div class="box1"></div>
    <div class="box2"></div>
  </div>


</body>

</html>

固定定位

固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动

使用场景如下，怎么滑动页面，这个侧栏都是不动的，用到了固定定位

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: fixed;
      right: 50px;
    }

    .box {
      height: 5000px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
  </div>


</body>

</html>

注意事项

就是说，不论是绝对定位还是相对定位，他们的位置都是相对于父级的，就像和父级“绑定”了。那么如果父级有设置定位，就相对于这个父级。如果没有，就向上逐级寻找，知道顶层（html）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 50px;
    }

    .box2 {
      width: 300px;
      height: 300px;
      background-color: green;
    }

    .box {
      margin: 200px;
      position: relative;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>


</body>

</html>

Z-index

z-index 是 CSS 属性，用于控制元素在 z 轴上的堆叠顺序。它适用于 position 属性设置为 relative、absolute、fixed 或 sticky 的元素。z-index 的值决定了元素的层叠顺序，数值越大，元素越靠近用户的视口，越在上面显示。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 200px;
    }

    .box2 {
      width: 300px;
      height: 300px;
      background-color: green;
    }

    .box {
      margin: 200px;
      position: relative;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>


</body>

</html>

怎么让绿色显示在红色上面呢，用z-index设置优先级即可

需要注意的是！

z-index 属性仅在元素具有定位属性（position: relative、position: absolute、position: fixed 或 position: sticky）时才会生效。如果没有设置定位属性，z-index 不会影响元素的堆叠顺序。

所以要用z-index就要记得加定位，否则不生效

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 200px;
      z-index: 1;
    }

    .box2 {
      width: 300px;
      height: 300px;
      background-color: green;
      position: absolute;
      z-index: 2;
    }

    .box {
      margin: 200px;
      position: relative;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>


</body>

</html>