AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS定位（如果想知道CSS有关定位的知识点，那么只看这一篇就足够了！）

2024-06-21 60
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS定位（如果想知道CSS有关定位的知识点，那么只看这一篇就足够了！）

什么是定位

       在了解有哪些定位之前，让我们先来了解一下什么是定位：（以下为官网解释）

CSS中 position属性（即定位）用于指定一个元素在文档中的定位方式。left、right、top和bottom属性则决定了该元素的最终位置。

从官网的解释中我们可以知道，CSS中 position属性（即定位）是用于调整html中元素的位置的。

       在上文中，我们已经了解了什么是定位，在下文我们会讲解不同的定位方式，首先来看第一个，相对定位。

1.相对定位

       首先我们要考虑的就是如何对所想要的元素开启相对定位：（方法如下）

给元素设置 position:relative 即可实现相对定位。

在上文所说，定位即调整html中的元素的位置，那么开启了相对定位之后，我们如何对其位置进行调整呢？

我们只需要使用 left 、right 、top 、bottom 四个属性调整位置即可。

那么相对定位的参考点在哪里？

其相对的是自己原来的位置。

案例演示：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.8.css">
</head>
<body>
    <div class="outer">
        <div class="inner">这是内部元素</div>
    </div>
</body>
</html>

CSS代码：

.outer {
    width: 400px;
    height: 300px;
    background-color: rgb(176, 176, 176);
    border: 2px solid black;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    border: 2px solid black;
    position: relative;
    left: 50px;
    top: 50px;
}

从上图我们就可以看到内部橙色背景的元素偏离了自己原来的位置横竖各50px，这样我们就大致的了解了相对定位的使用了！

补充：相对定位的特点

1.  不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2.  定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认规则是：
       （1）定位的元素会盖在普通元素之上。
       （2）都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3.  left 不能和right 一起设置， top 和bottom 不能一起设置。
4.  相对定位的元素，也能继续浮动，但不推荐这样做。
5.  相对行为的元素，也能通过margin 调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位会与绝对定位配合使用。（下文会讲）！

这样我们就了解了所有关于相对定位的内容了。

2.绝对定位

       对于绝对定位，我们如何设置绝对定位呢？

给元素设置 position: absolute 即可实现绝对定位。

那么开启了绝对定位之后，我们如何对其位置进行调整呢？

我们只需要使用 left 、right 、top 、bottom 四个属性调整位置即可。

绝对定位的参考点在哪里呢？

参考它的包含块。

看到这，有读者就会问了，什么是包含块，在之前的学习中并没有讲解过什么是包含块啊？（以下即是包含块的概念）

包含块：

1. 对于没有脱离文档流的元素：包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都
没定位，那包含块就是整个页面）。

从包含块概念的第二条中，我们就可以理解上文讲解相对定位时候所说的（绝大多数情况下，相对定位会与绝对定位配合使用了）

案例演示：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.8.css">
</head>
<body>
    <div class="outer">
        <div class="inner">这是内部元素</div>
    </div>
</body>
</html>

CSS代码：

.outer {
    width: 400px;
    height: 300px;
    background-color: rgb(176, 176, 176);
    border: 2px solid black;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    border: 2px solid black;
    position: absolute;
    right: 50px;
    top: 50px;
}

在CSS代码中，内部元素的所有父类都没有开启定位，所有这里就是如果所有祖先都没定位，那包含块就是整个页面。

如果给其父类开启定位，CSS代码：

.outer {
    width: 400px;
    height: 300px;
    background-color: rgb(176, 176, 176);
    border: 2px solid black;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    border: 2px solid black;
    position: absolute;
    right: 50px;
    top: 50px;
}

这样我们就大致的了解了绝对定位的使用规则了！

补充：绝对定位元素的特点：

1.  脱离文档流，会对后面的兄弟元素、父元素有影响。
2.  left 不能和right 一起设置， top 和bottom 不能一起设置。
3.  绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4.  绝对定位的元素，也能通过margin 调整位置，但不推荐这样做。
5.  无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

这样我们就了解了所有关于绝对定位的内容了。

3. 固定定位

        对于绝对定位，我们如何设置固定定位呢？

给元素设置 position: fixed 即可实现固定定位。

那么开启了固定定位之后，我们如何对其位置进行调整呢？

我们只需要使用 left 、right 、top 、bottom 四个属性调整位置即可。

固定定位的参考点在哪里呢？

参考它的视口。

什么是视口？—— 对于PC 浏览器来说，视口就是我们看网页的那扇“窗户”。（如图）

案例演示：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.8.css">
</head>
<body>
    <div class="outer">
        <div class="inner">这是内部元素</div>
    </div>
</body>
</html>

CSS代码：

.outer {
    width: 400px;
    height: 300px;
    background-color: rgb(176, 176, 176);
    border: 2px solid black;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    border: 2px solid black;
    position: fixed;
    top: 0px;
    right: 0px;
}

我们会发现，即使其父元素开启了定位，但是固定定位的参考点也是视口。

注意：当浏览页面顶部时，定位元素处于右上角。在滚动后，它相对于视口仍处于同一位置。

这样我们就大致的了解了固定定位的使用规则了！

补充：固定定位元素的特点

1.  脱离文档流，会对后面的兄弟元素、父元素有影响。
2.  left 不能和right 一起设置， top 和bottom 不能一起设置。
3.  固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
4.  固定定位的元素，也能通过margin 调整位置，但不推荐这样做。
5.  无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

这样我们就了解了所有关于固定定位的内容了。

4. 粘性定位

        对于绝对定位，我们如何设置绝对定位呢？

给元素设置 position:sticky 即可实现粘性定位。

那么开启了粘性定位之后，我们如何对其位置进行调整呢？

我们只需要使用 left 、right 、top 、bottom 四个属性调整位置即可。

粘性定位的参考点在哪里呢？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

案例演示：

CSS代码：

.inner {
    height: 50px;
    background-color: orange;
    border: 2px solid black;
    position: sticky;
    top: 10px;
}

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

在视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下。

这里给读者一段代码，读者可以复制到编译器上尝试一下效果：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.8.css">
</head>
<body>
    <div>
        <dl>
          <dt>A</dt>
          <dd>Andrew W.K.</dd>
          <dd>Apparat</dd>
          <dd>Arcade Fire</dd>
          <dd>At The Drive-In</dd>
          <dd>Aziz Ansari</dd>
        </dl>
        <dl>
          <dt>C</dt>
          <dd>Chromeo</dd>
          <dd>Common</dd>
          <dd>Converge</dd>
          <dd>Crystal Castles</dd>
          <dd>Cursive</dd>
        </dl>
        <dl>
          <dt>E</dt>
          <dd>Explosions In The Sky</dd>
        </dl>
        <dl>
          <dt>T</dt>
          <dd>Ted Leo & The Pharmacists</dd>
          <dd>T-Pain</dd>
          <dd>Thrice</dd>
          <dd>TV On The Radio</dd>
          <dd>Two Gallants</dd>
        </dl>
      </div>
</body>
</html>

CSS代码：

* {
    box-sizing: border-box;
  }
  
  dl {
    margin: 0;
    padding: 24px 0 0 0;
  }
  
  dt {
    background: #b8c1c8;
    border-bottom: 1px solid #989ea4;
    border-top: 1px solid #717d85;
    color: #fff;
    font:
      bold 18px/21px Helvetica,
      Arial,
      sans-serif;
    margin: 0;
    padding: 2px 0 0 12px;
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
  }
  
  dd {
    font:
      bold 20px/45px Helvetica,
      Arial,
      sans-serif;
    margin: 0;
    padding: 0 0 0 12px;
    white-space: nowrap;
  }
  
  dd + dd {
    border-top: 1px solid #ccc;
  }

注意：粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定

这样我们就大致的了解了粘性定位的使用规则了！

粘性定位的用处：

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

补充：粘性定位元素的特点

1.  不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
2.  最常用的值是top 值。
3.  粘性定位和浮动可以同时设置，但不推荐这样做。
4.  粘性定位的元素，也能通过margin 调整位置，但不推荐这样做。

这样我们就了解了所有关于粘性定位的内容了。

5. 定位层级

       了解完了不同类型的定位之后，现在让我们了解一下定位的层级（即谁显示在上边，谁显示在下边）

定位层级规定：

1.  定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2.  如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
3.  可以通过 css 属性 z-index 调整元素的显示层级。
4.  z-index 的属性值是数字，没有单位，值越大显示层级越高。
5.  只有定位的元素设置 z-index 才有效。
6.  如果z-index 值大的元素，依然没有覆盖掉z-index 值小的元素，那么请检查其包含块的层级。

也就是说，我们可以给所需元素设置其定位层级，使其在开启定位中显示在更上层。

6. 定位的特殊应用

说在前面，注意：

1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
2. 发生相对定位后，元素依然是之前的显示模式。
3. 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。

了解完了定位的设置与使用之后，在让我们看一下定位属性的一些特殊应用场景：

       （1）让定位元素的宽充满包含块

1. 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为0 。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.8.css">
</head>
<body>
    <div class="outer">
        <div class="inner">这是内部元素</div>
    </div>
</body>
</html>

CSS代码：

.outer {
    width: 400px;
    height: 300px;
    background-color: rgb(176, 176, 176);
    border: 2px solid black;
    position: relative;
}
.inner {
    height: 100px;
    background-color: orange;
    border: 2px solid black;
    position: absolute;
    /* 注意这里不能在设置内部元素的宽度了 */
    left: 0px;
    right: 0px;
}

       这里会有读者会有疑问，上文中不是说了不能同时设置left和right属性吗？如果同时设置不是只会执行left的效果吗？这里为什么又可以了呢？

       这就是定位的特殊运用了，只要我们不对内部元素设置其宽度，我们同时使用left和right属性，就会使其块宽想与包含块一致，但是如果设置了宽度，那么就会遵循不能同时设置left和right属性的规则。

注意：如果想让块宽想与包含块一致，那么这里就不能在设置内部元素的宽度了！

2. 高度想与包含块一致， top 和 bottom 设置为 0 。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.8.css">
</head>
<body>
    <div class="outer">
        <div class="inner">这是内部元素</div>
    </div>
</body>
</html>

CSS代码：

.outer {
    width: 400px;
    height: 300px;
    background-color: rgb(176, 176, 176);
    border: 2px solid black;
    position: relative;
}
.inner {
    width: 100px;
    background-color: orange;
    border: 2px solid black;
    position: absolute;
    /* 注意这里不能在设置内部元素的高度了 */
    top: 0px;
    bottom: 0px;
}

     

      （2）让定位元素在包含块中居中

学习完定位之后，我们就可以使用定位的操作来让定位元素在包含块中居中。

给想要居中的元素设置其CSS代码：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

案例演示：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.8.css">
</head>
<body>
    <div class="outer">
        <div class="inner">这是内部元素</div>
    </div>
</body>
</html>

CSS代码：

.outer {
    width: 400px;
    height: 300px;
    background-color: rgb(176, 176, 176);
    border: 2px solid black;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    border: 2px solid black;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

注意：这里需要设置其内部元素的宽高，要不就会变成充满整个包含块了（由定位元素的特殊运用（一）得出）

这样我们就了解了定位属性的一些特殊应用场景了！

文章标签：
前端开发
编译器
关键词：
CSS知识点
CSS定位
CSS定位知识点
CSS知识点足够
CSS足够
秋刀鱼不做梦
目录
相关文章
派大鑫的工作室
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
76 2
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
34 1
[HTML、CSS]知识点
游客zi3qmblbcdexu
|
2月前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
26 3
游客zi3qmblbcdexu
|
2月前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
68 2
你都不懂
|
2月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
你都不懂
28 0
小徐在进步
|
3月前
|
前端开发
【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧
定位、CSS精灵与一些其他CSS高级技巧
小徐在进步
39 9
派大鑫的工作室
|
2月前
|
前端开发 容器
CSS弹性盒子知识点
CSS弹性盒子知识点
派大鑫的工作室
40 0
周一同学Zelina
|
3月前
|
Web App开发 前端开发 JavaScript
「offer来了」1张思维导图，6大知识板块，带你梳理面试中CSS的知识点！
该文章通过一张思维导图和六大知识板块系统梳理了前端面试中涉及的CSS核心知识点，包括CSS框架、基础样式问题、布局技巧、动画处理、浏览器兼容性及性能优化等方面的内容。
周一同学Zelina
27 0
你都不懂
|
4月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
你都不懂
33 5
土木林森
|
4月前
|
前端开发 容器
解锁CSS定位奥秘，从迷茫到精通，让你的网页布局“稳如老狗”，引领前端新潮流！
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石：相对定位、绝对定位与固定定位。通过具体示例，展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置；绝对定位使元素完全脱离文档流，适用于精确控制位置的需求；固定定位则确保元素始终固定于浏览器窗口特定位置，不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
土木林森
71 0