Html之position粘性定位

几天刚开始写一个Vue项目，遇到了一个定位问题，觉得挺有意思的，这里分享给大家。

其实就是一个首页顶部固定的问题，一提到顶部固定，相信大家都第一反应是想到了

position:fixed;

下面来看一下这个页面

这个页面看起来挺正常的，其实是下面内容区添加了margin-top:60px样式，如果把margin-top去掉就会变成下图这样

发现上面的Welcome to Your Vue.js App字样被顶部导航栏遮盖，这里大家可能会说，覆盖后下面内容设置一个margin-top不就行了，其实前面我就设置过margin-top为60px，这个60px实际上是顶部导航栏的高度；

导航栏高度基本上都是固定的，有时候除了导航栏需要固定，也会碰到一下其他的高度不固定的元素需要固定，如果margin-top单纯设置一个固高当然不行；

有人会说这个高度可以根据需要固定元素的高度动态设置，其实这是一种办法，通过js动态获取顶部导航栏的高度，然后给下面内容区margin-top赋值；

今天我想说的是另一种方法，就是position定位属性sticky粘性定位，大家听到这个可能并不陌生，sticky是CSS3提供的一个新属性，相当于是相对定位relative和固定定位fixed的结合体

它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素的距离其父元素的距离达到 sticky 粘性定位要求时；position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。

但是sticky也需要满足一些条件才能生效

使用条件：

1. 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性；

2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；

3. 元素的高度不能低于sticky 元素的高度；

4. sticky 元素仅在其父元素内生效

SS中通常使用position 属性，决定元素的定位方式。

常用的定位方式通常有

值	意义
relative	相对定位
absolute	绝对定位
fixed	固定定位

相对定位

position 设置为 relative。

相对定位是元素相对于自己原来的位置通过使用top、left 等属性进行移动，使其显示在新的位置上。

相对定位的元素虽然移动了，但是之前的位置并没有放弃，同时也不会抢占移动后原有元素的位置(但会对原有位置的元素进行压盖)。

相对定位通常用来微调元素位置；而且相对定位可以作为下面要讲的绝对定位的参考坐标。

属性	值	作用
top	像素、百分比等	相对原来位置，距离上边移动距离，可以为负值
left	像素、百分比等	相对原来位置，距离左边移动距离，可以为负值
right	像素、百分比等	相对原来位置，距离右移动距离，可以为负值
bottom	像素、百分比等	相对原来位置，距离下边移动距离，可以为负值。

相对定位举例

像素描述位置

box2 开启了相对定位，在新的位置得到了渲染。

<!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>
      * {
        margin: 0;
        padding: 0;
      }


      p {
        width: 100px;
        height: 100px;
        background-color: orange;
        border: 1px solid #000;
      }


      .box2 {
        position: relative;
        top: 102px;
        left: 102px;
      }
</style>
  </head>
  <body>
    <p></p>
    <p class="box2"></p>
    <p></p>
  </body>
</html>

百分比形式

如果在相对定位中， top、left、bottom、right 写成百分比的形式，表示他们在父容器内所显示的百分比位置。

举例

父元素宽高均200px。开启子元素相对定位，则子元素位置如下。

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 40px auto;
      }


      p {
        position: relative;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

绝对定位

position 设置为 absolute。

绝对定位的元素在浏览器中拥有绝对位置，可以通过坐标进行描述。

绝对定位的元素脱离标准文档流，释放了自己本来应该在的地方的位置；同时会在新的位置上对其他元素进行压盖。

绝对定位的元素会在自己祖先元素中寻找拥有定位属性的元素作为参考点。这个祖先元素通常是相对定位的。

绝对定位的元素如果找不到拥有定位属性的祖先元素作为参考点，则相对于 IBC（初始包含块，可以认为是HTML根元素）定位。

属性	值	作用
top	像素、百分比等	相对参考点位置，距离参考点上边移动距离，可以为负值
left	像素、百分比等	相对参考点位置，距离参考点左边移动距离，可以为负值
right	像素、百分比等	相对参考点位置，距离参考点右边移动距离，可以为负值
bottom	像素、百分比等	相对参考点位置，距离参考点下边移动举例，可以为负值。

举例

参考点IBC

参考点是IBC,此时的top、left、bottom、right都是通过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>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: orange;
      }
      .box2 {
        background-color: green;
        position: absolute;
        top: 230px;
        left: 200px;
      }
      .box3 {
        background-color: blue;
      }
</style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <ul>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
    </ul>
  </body>
</html>

参考点是定位元素

最经典的就是，父节点开启相对定位，子元素开启绝对定位；此时的top、left、bottom、right都是通过父元素的位置描述子元素。

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 402px;
        height: 402x;
        border: 1px solid #000;
        padding: 100px;
        margin: 0 auto;
        position: relative;
      }


      .box2 {
        width: 200px;
        height: 200px;
        padding: 50px;
        border: 1px solid #000;
        position: relative;
      }


      .box3 {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        <div class="box3">dual</div>
      </div>
    </div>
  </body>
</html>

固定定位

position 设置为 fixed。

不管页面如何下拉，元素永远固定在一个位置。

固定定位只以页面为参考点，并且同样也脱离了标准的文档流。

固定定位用途：

用于页面内容比较长，返回顶部功能等。
用于制作CSS精灵 (现在很少用了)

<!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>固定定位demo</title>
    <style>
        .box {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }


        body {
            height: 100000px;
        }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

层叠属性

对于上述说的定位元素，他们都有可能压盖到渲染后的位置上的原有元素。某些场景下我们不希望此事发生。

此时就用到了 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>z-index属性演示</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top:100px;
            left: 100px;
            z-index: 2;
        }


        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;
            z-index: 10;
        }
</style>
</head>
<body>


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

总结

相对定位：相对于自己原来的位置进行定位。

绝对定位：选一个参考点进行定位。参考点可以是拥有定位属性的祖先元素，如果找不到，则为IBC。

固定定位：在页面（可视化的屏幕）的固定位置，不随着页面滚动而滚动。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

有些时候

为了看到光明

你必须冒险闯入黑暗之中

- 2024.03.29 -

CSS定位属性是用于控制网页中元素位置的一种方式，它能够让元素在页面上精准地落在我们想要的位置。

在CSS中，定位（Positioning）是控制元素在页面上如何定位和显示的一种机制。它主要包括四种属性：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。

每种定位方式都有其独特的特点和使用场景，下面将分别介绍这几种定位属性。

一、Static（静态定位）

静态定位是元素的默认定位方式，元素按照正常的文档流进行排列。在静态定位状态下，不能配合top、bottom、left、right来改变元素的位置。

可以用于取消元素之前的定位设置。

代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>

<div>这是一个静态定位的元素。</div>

</body>
</html>

二、Fixed（固定定位）

固定定位使元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定的位置。

固定定位的元素会脱离正常的文档流。

示例代码：

<!DOCTYPE html>
<html>
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 给整个页面设置高度，出滚动条以便观察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

运行结果：

移动前

移动后

比如我们经常看到的网页右下角显示的“返回到顶部”，就可以用固定定位来实现。

<!DOCTYPE html>
<html>
<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>Document</title>
<style>
body {
position: relative;
}
.content {
/* 页面内容样式 */
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 5000px;">
<div>
</div>
<button id="backToTop" onclick="scrollToTop()">返回顶部</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>
</html>

运行结果：

三、Relative（相对定位）

相对定位是将元素对于它在标准流中的位置进行定位，通过设置边移属性top、bottom、left、right，使指定元素相对于其正常位置进行偏移。如果没有定位偏移量，对元素本身没有任何影响。

不使元素脱离文档流，空间会保留，不影响其他布局。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:relative;/*相对定位*/
left:100px;/*向右偏移100px*/
top:-50px;/*向上偏移50px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

运行结果：

没使用相对定位之前是这样的：

使用相对定位后：相对于原来的位置向右偏移了100px，向上偏移50px。

虽然它的位置发生了变化，但它在标准文档流中的原位置依然保留。

四、Absolute（绝对定位）

绝对定位使元素相对于最近的非 static 定位祖先元素进行定位。如果没有这样的元素，则相对于初始包含块（initial containing block）。绝对定位的元素会脱离正常的文档流。

如果该元素为内联元素，则会变成块级元素，可直接设置其宽和高的值（让内联具备快特性）；
如果该元素为块级元素，使其宽度根据内容决定。（让块具备内联的特性）

<style>
.wrap{
width:500px;
height:400px;
border: 2px solid red;
}
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:absolute;/*绝对定位*/
left:100px;/*向右偏移100px*/
top:30px;/*向下偏移30px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;

}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

将第二个设置为绝对定位后，它脱离了文档流可以定位到页面的任何地方，在标准文档流中的原有位置会空出来，所以第三个会排到第一个下面。

第二个相对于它的父元素向右偏移100，向下偏移30。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想

五、z-index（层级顺序的改变）

层叠顺序决定了元素之间的堆叠顺序。z-index 属性用于设置元素的层叠顺序。具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。

注意：

默认值是0
数值越大层越靠上
不带单位
没有最大值和最小值
可以给负数

代码示例：

<!DOCTYPE html>
<html>
<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>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
div:nth-of-type(2){
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
div:nth-of-type(3){
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>

运行结果：

可以看到，最后一个div依然存在，但是看不见了，原因就是我们改变了z-index属性值。

以上就是CSS定位属性的介绍了，通过这些定位属性，可以灵活地控制网页中元素的位置和堆叠顺序。

在实际应用中，CSS定位属性的使用需要考虑到整体布局和用户体验。合理运用这些定位技巧，可以让你的网页不仅美观，而且易于使用和维护。记住，好的设计总是细节和功能的完美结合。

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

在线咨询

上一篇：JavaScript for 循环
下一篇：为HTML页面添加视频、音频的方法-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Html之position粘性定位

使用条件：

相对定位

相对定位举例

绝对定位

举例

固定定位

层叠属性

总结

一、Static（静态定位）

二、Fixed（固定定位）

三、Relative（相对定位）

四、Absolute（绝对定位）

五、z-index（层级顺序的改变）

您的项目需求