关于position的问题

最新推荐文章于 2022-11-28 16:43:16 发布

原创最新推荐文章于 2022-11-28 16:43:16 发布 · 741 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#position #absolute #relative #fixed #sticky

学习笔记专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了CSS中的五种定位方式：static、relative、absolute、sticky 和 fixed 的使用方法及应用场景，通过实例帮助读者理解每种定位的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position属性用于指定一个元素在文档中的定位方式。通过top，right，bottom，left属性来决定该元素的最终位置。
定位类型分别有：static，relative，absolute，sticky。
通过以下代码观察它们的不同
html

<div class="box">
        <div class="block1"></div>
        <div class="block2"></div>
        <div class="block3"></div>
        <div class="block4"></div>
        <p>填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动填充文字让其滚动</p>
    </div>

css

    div{
        margin: 0;
        padding: 0;
    }
    .box{
        margin: 50px;
        overflow-y: scroll;
        width: 200px;
        height: 200px;
        background-color: #ccc;
    }
    .block1{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid blue;
        background-color: purple;
        position: static;
    }
    .block2{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid red;
        background-color: orange; 
        position: absolute;
        top: 20px;
        left: 20px;
    }
    .block3{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid yellow;
        background-color: green;
        position: relative;
        top: 20px;
        left: 20px; 
    }
    .block4{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid #000;
        background-color: #fff; 
        position: sticky;
    }

效果图
position
（sticky效果需要通过滚动才可以查看，元素将会和他的容器一起滚动，直到它位于容器的顶部，或到达顶部指定的偏移量，然后停止滚动，因此它保持可见。）

定位类型

定位元素（position）是其计算后位置属性为relative，absolute，fixed或sticky的一个元素。
相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element是计算后位置属性为 absolute 或* fixed* 的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

大多数情况下，height和width 被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定top和bottom ，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left 和 right并将width 指定为auto来填充可用的水平空间。

除了刚刚描述的情况（绝对定位元素填充可用空间）：

如果top和bottom都被指定（技术上，而不是auto），top 胜出。
如果指定了left 和right两侧，则在direction为ltr（英语，水平日语等）时left 赢，并且在direction为rtl时right赢（阿拉伯文，希伯来文等）。

语法

position 属性被指定为从下面的值列表中选择的单个关键字。

取值

static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table–group, table-row, table-column, table-cell, table-caption元素无效。

absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

sticky
盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。
（position: sticky 对 table 元素的效果与 position: relative 相同）

示例

css代码均为

    div{
        margin: 10px;
        padding: 0;
    }
    .box{
        width: 50px;
        height: 50px;
        border:2px solid #666;
        background-color: #777;
        float: left;
    }
    .block1{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid blue;
        background-color: purple;
        position: static;
    }
    .block2{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid red;
        background-color: orange; 
        position: absolute;
   /*       
        top: 15px;
        left: 25px;
    在绝对定位的实例中表达
   */
    }
    .block3{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid yellow;
        background-color: green;
        position: relative;
    /*      
        top: 15px;
        left: 25px;
    在相对定位的实例中表达
    */
    }
    .block4{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid #000;
        background-color: #fff; 
        position: sticky;
        top: 10px;
    }
    .block5{
        width: 20px;
        height: 20px;
        display: inline-block;
        border:2px solid #555;
        background-color: #333; 
        position: fix;
    }

绝对定位

例1
html

    <div class="box"></div>
    <div class="block2"></div>
    <div class="box"></div>
    <div class="box"></div>

绝对定位

例2

<div class="box"></div>
    <div class="box">
        <div class="block1">
            <div class="block3">
                <div class="block2"></div>
            </div>
        </div>
    </div>

绝对定位

例3

<div class="box"></div>
    <div class="box">
        <div class="block3">
            <div class="block1">
                <div class="block2"></div>
            </div>
        </div>
    </div>
    <div class="box"></div>
    <div class="box"></div>

绝对定位

因为绝对定位是相对于最近的非 static 祖先元素定位，所以在例2和例3中，block2都是相对于block3定位的。而在例1中，block2是相对于box来定位的。
例3中block2图示

通过图示可以了解到，属性中的top与left是代表了初始块相对于定位块的位置，在例3中，可理解为初始块在定位块的左25px，上15px的位置，或者可理解为初始块向下平移15px，向右平移25px后可得到定位块。
如果将元素设置为absolute后却没有定义top（bottom）或left（right）的话，则元素将停留在初始位置中。
-49的来源
25+10+2+2+10=49
取其相反数

相对定位

<div>
    <div class="box"></div>
    <div class="block2">
        <div class="box">
            <div class="block1">
                <div class="block3"></div>
            </div>
        </div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div>
    <div class="box"></div>
    <div class="box">
        <div class="block2">
            <div class="block1">
                <div class="block3"></div>
            </div>
        </div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div>
    <div class="box"></div>
    <div class="box">
        <div class="block1">
            <div class="block2">
                <div class="block3"></div>
            </div>
        </div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
</div>

多次实验表明，相对定位为子元素对父元素的相对定位。
其定位图示如下

定位步与绝对定位类似。

固定定位

用最开头的代码作为例子，在css中加入

.block5{
        width: 50px;
        height: 50px;
        display: inline-block;
        border:2px solid #999;
        background-color: #888; 
        position: fixed;
    }

在html代码的最后加上<div class="block5"></div>
当窗口滚动时，块元素的位置并不会发生变化
固定定位
当在css设置中加入定位属性，如top: 15px; left: 25px;
结果如图所示
fixed

从目前来看，当元素设置为fixed属性时，无论窗口是否滚动或者发生什么变化，元素的位置是不会发生变化。

<div class="block1">
    <div class="block2">
        <div class="block3">
            <div class="block5"></div>
        </div>
    </div>
</div>

绝对定位

图示绝对定位

平时浏览网页时总是阴魂不散的广告就是通过fixed实现的。

sticky

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

#one { position: sticky; top: 10px; }

iewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下.
粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

css

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: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

html

<div>
  <dl>
    <dt>标题1</dt>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
  </dl>
  <dl>
    <dt>标题2</dt>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
  </dl>
  <dl>
    <dt>标题3</dt>
    <dd>内容</dd>
    <dd>内容</dd>
  </dl>
  <dl>
    <dt>标题4</dt>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
  </dl>
</div>

sticky
sticky

当设置top为-1时，通俗的解释就是当滚动滚过元素顶部1px时，便会变成相对定位，在元素达到顶部到滚过元素顶部1px之后到元素内容滚完之前，元素如同固定定位一样固定在窗口顶部。
需要注意的是，sticky属性对浏览器存在兼容性问题，当我在用360浏览器时，sticky并没有发挥作用，直到换成Chrome才表现出sticky的特性。

疑问

1.

html

    <div class="box"></div>
    <div class="block1|block2"></div>
    <div class="box"></div>
    <div class="box"></div>

为什么效果图是
疑问1
即<div class="block1"></div>为什么在最右边？

2.

html

<div class="box"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="box"></div>
<div class="box"></div>

疑问2
即为什么position：relative会将position：static覆盖住？

3.

如何使得position：fixed可以相对于父元素固定定位？

今天的学习笔记先到这里！Zzz~

资料来源：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position