携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

1️⃣前言

大家好，我是翼同学。今天笔记的内容是：

定位

2️⃣内容

2.1、什么是定位？

定位就是使用position 属性，用于规定元素的定位类型。

position 属性的具体取值有五种：

static：静态
relative：相对
fixed：固定
absolute ：绝对
sticky：粘性

2.2、为什么需要定位？

定位是我们在网页布局中常用的方法。当标准流或浮动都无法满足我们的布局需求时，使用定位可以很好的解决一些问题。

举个例子，当我们需要在页面中自由地移动某个盒子的位置，并且还能压住其他的元素，覆盖在其上面，那么我们就可以使用定位属性。又比如当我们拉动滚动条时，浏览器的可视窗口内，要求某元素是固定在某个位置不动的，这也可以利用定位属性来做。

2.3、如何使用定位？

2.3.1、定位的组成

完整的定位布局方式包含了：

定位属性：指定了元素的定位方式（有五种取值：static、relative、fixed、absolute 、sticky）
位偏移属性：指定了元素的最终位置（有四种位偏移属性：top、right、bottom、left）

注意事项：

只有当元素设置了position属性，才可以使用位偏移属性。
对于不同定位方式的元素，其位偏移的工作方式是不同的。

2.3.2、static

position: static;

事实上这个静态定位是比较少用到的，我们了解即可。

因为当我们设置元素的定位属性为static时，该元素也不会拥有什么特殊的定位方式，这也就是元素在默认情况下的定位方式，即按照页面的正常布局流的方式来定位。需要注意的是，当元素的定位属性设置为static后，位偏移属性将不起作用。

2.3.3、relative

position: relative;

如果我们需要对某个元素进行自由地移动位置，那么就可以使用相对定位，即relative。简单来说，当元素设置为position: relative; 后，其可以通过位偏移属性来调整位置，并相对于正常位置进行定位。

另外，相对定位的元素的位偏移方式是相对它原来的位置来进行偏移的，并且没有脱离标准流的位置，后面的元素仍然占有原先的位置。

举个例子：

HTML结构如下：

<div>盒子1</div>
<div class="relativeBox">盒子2</div>
<div>盒子3</div>

CSS样式如下：

div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border-radius: 30px;
}
.relativeBox {
    background-color: pink;
}

效果如下：

添加了相对定位后，我们就可以随意移动盒子的位置。如下所示：

.relativeBox {
    position: relative;
    top: 50px;
    left: 50px;
}

盒子2距离原先的位置的上方50px，距离左边50px。

2.3.4、absolute

position: absolute;

绝对定位指的是元素在移动位置的时候，是相对于祖先元素而言的。与相对定位不同。

绝对定位的特点是：

绝对定位的元素会根据最近一级的定位祖先元素为参考进行定位；（如果没有祖先元素或者祖先元素都没有设置定位属性，则以文档body为参考基准设置偏移属性）
绝对定位的元素会移出正常文档流，也就是说不再占有原先的位置；
绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

有时我们会将父级盒子设置为相对定位relative，用于限制子盒子的显示。而子盒子如果不用占有位置，则可以设置为绝对定位absolute，此时子盒子也不会影响到其他兄弟盒子。

2.3.5、fixed

固定定位的使用场景也很常见。

position: fixed;

固定定位的元素是相对于浏览器可视窗口为基准而定位的，使用固定定位后意味着该元素将固定在页面的某个位置，即使滚动页面，该元素也始终位于同一位置。

同样的，我们使用位偏移属性top、right、bottom 和 left来控制定位元素的位置。

另外需要注意的是，固定定位的元素也不再占有原先的位置，也就是脱离标准布局流。我们可以将固定定位看出特殊的绝对定位。

2.3.6、sticky

粘性定位可以认为是相对定位和固定定位的粘合。

position: sticky;

特点如下：

以浏览器的可视窗口为参照点进行移动元素（这也是固定定位的特点）
粘性定位的元素可占有原先的位置，即不脱标（这也是相对定位的特点）
使用粘性定位时，必须给到位偏移的值。

举一个使用场景的例子，比如导航栏，当页面滚动时，该导航栏的表现像相对定位元素一样，直到页面滑动到某个位置时，该导航栏就固定住了。这种效果就可以用粘性定位来做。

简单来说，粘性元素就类似在相对定位和固定定位之间切换。（起初是相对定位，直到达到设置的位偏移量后切换为固定定位，此时位置保持不变）

3️⃣写在最后

好了，今天的笔记就记到这里。

【CSS】 position : static | absolute | relative | fixed | sticky