likes
comments
collection
share

读定位布局，懂如何向你靠近

作者站长头像
站长
· 阅读数 29

前言

当你在网页上折腾布局时，就像是在做一场华丽的“家具搬运工大挑战”。CSS定位布局就像是告诉浏览器：“哎呀，这个元素该往这儿摆，那个元素得往那边挪。”就像是给家具们贴上了“粘土”，让它们随心所欲地排列，一会儿左靠右倚，一会儿上下堆叠，争先恐后地展示出最佳的网页版“家居风格”。

1.定位布局概况

读定位布局，懂如何向你靠近

首先定位布局分为四种，static是默认的，和不用是一样的。还有就是剩下的三种定位，定位布局配合使用四个属性。

2.相对定位

读定位布局，懂如何向你靠近

相对定位有如下特点

  1. 相对定位仍然占有原来的位置，并且没有改变之前的显示模式。
  2. 相对自己之前的位置进行移动。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .a {
      width: 400px;
      height: 400px;
      background-color: pink;
      position: relative;
      left: 100px;
      top: 100px;
    }
  </style>
</head>

<body>
  <div class="a"></div>
  <p>
    相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相
    对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相相对定位相对定位相对定
    位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相
    对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对
    定位相对定位相对定位相
    对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位
    对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位相对定位
  </p>
</body>

</html>

读定位布局，懂如何向你靠近

3.绝对定位

读定位布局，懂如何向你靠近

绝对定位有如下特点：

  1. 在页面中已经不占有原来的位置，改变为行内块显示模式。
  2. 相对最近一级已经带有定位的父级（通常设置为相对定位）进行定位，如果没有则是浏览器窗口。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .grandfather {
      width: 800px;
      height: 800px;
      background-color: pink;
    }

    .father {
      width: 400px;
      height: 400px;
      background-color: blueviolet;
      position: relative;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: blue;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  </style>
</head>

<body>
  <div class="grandfather">
    <div class="father">
      <div class="son">

      </div>
    </div>
  </div>
</body>

</html>

读定位布局，懂如何向你靠近

4.定位实例

那么我们可以怎么做达到让一个定位的盒子居中于浏览器中央呢？

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .a {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="a"></div>
</body>

</html>

读定位布局，懂如何向你靠近

绝对定位的盒子不能使用margin：0 auto进行居中，那么我们采用先离浏览器左边50%，上面50%，然后往左平移自身50%，往上平移自身50%就可以了。

5.固定定位

固定定位的特点有

  1. 不再占有原来位置，改变显示模式为行内块。
  2. 相对于浏览器窗口进行的定位。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .a {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: fixed;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <div class="a"></div>
  <p>
    固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位
    固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位
    固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位
    固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位  固定定位
  </p>
</body>

</html>

读定位布局，懂如何向你靠近

6.小结

最后我们进行小结

  1. 相对定位（Relative Positioning） ：

    • 使用 position: relative; 来指定相对定位。
    • 元素在正常文档流中占据空间，但通过设置 top、bottom、left、right 属性相对于自身原来的位置进行偏移。

  2. 绝对定位（Absolute Positioning） ：

    • 使用 position: absolute; 来指定绝对定位。
    • 元素脱离文档流，相对于其最近的已定位（指定了 position: relative/absolute/fixed）的祖先元素定位，若没有则相对于文档根元素（<html>）。
    • 通过设置 top、bottom、left、right 属性来确定位置。

  3. 固定定位（Fixed Positioning） ：

    • 使用 position: fixed; 来指定固定定位。
    • 元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在窗口相同的位置。

  4. 层叠顺序（Z-index） ：

    • 使用 z-index 属性来控制定位元素的层叠顺序，值越大越靠上显示。
转载自:https://juejin.cn/post/7368421137918099494
评论
请登录