前端小记-定位（position）

环境：Windows 11

语言：HTML

---

 

• static（静态）

在一个窗口中，按照从左到右，从上到下的顺序排布，无特殊说明情况下static为默认值。

• Absolute（绝对定位）

1. 当没有父元素或者父元素没有定位时，参照物是浏览器的第一屏

 

       2.有父元素且父元素有定位时，参照物是父元素

• Relative（相对定位）

设定距离的参照物是原本自身的位置

• Fixed（固定定位）

不以其他因素的变动而变动

• Sticky（粘性定位）

可实现网页中拖拽滚动条的吸顶效果

 

 示例：

【相对定位】

咱们先创建三个div盒子，分别设置背景颜色以区分，并把中间的盒子定位设置为静态，添加距顶高度

 

下面是网页效果：

 

若修改定位为relative，并设置相关参数，我们就能得到：

 

为什么蓝色盒子偏离了原位置后黄色盒子并不会补位上去呢？

因为定位设置为relative的文档流不脱离，意味着蓝色盒子仍然占着中间的位置。

【绝对定位】

我们将第一个盒子定位设置为absolute，添加距离参数，可以发现就算前面有其他内容也不会影响到这个盒子的位置

*将元素定位设置为absolute，可将其转换为block元素。同样的效果还可以通过display：block/float：left实现

 区别于相对定位，绝对定位在元素位置改变后，原位置将会“腾出来”

*在有父元素时

我们先写一个大的父盒子，他有一个小的子盒子

 

再将父盒子设置margin：0 auto，显示在页面中间（但不设置定位）；子盒子定位设置为absolute，添加距离参数

我们就会得到这样的效果：

现在我们将父盒子的定位添加为relative，则会变成：

子盒子的位置改变是以父盒子为参照的。

定位里的层级

z-index：设置的数值越大，越靠前显示。（*前提是有定位（position）设置）

在父&子盒子中，z-index的设置无效，只能通过设置子盒子的z-index为负数，达到父盒子显示在上级的效果。