【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）

目录

一、CSS定位布局

1.1、static静态定位

1.2、relative相对定位

1.3、fixed固定定位

1.4、absolute绝对定位

（1）默认绝对定位参考点

（2）设置绝对定位参考点

1.5、sticky粘性定位

（1）sticky粘性定位失效的原因

（2）sticky案例

---

一、CSS定位布局

CSS定位布局，是通过【position】属性设置的，position属性可以有如下五个取值：

【position】属性取值：

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

给元素设置【position】属性之后，设置元素的定位方式，然后再通过【top、left、right、bottom】四个属性设置定位的位置。

注意：如果设置了position属性，但是没有设置【top、left、right、bottom】属性，那么position属性不会生效。

1.1、static静态定位

static静态定位，这种是元素默认的定位方式，也就说，没有设置position属性，和设置了【position：static；】属性，这个元素的显示效果是一样的。【top、left、right、bottom】四个属性对于static静态定位来说，是没有效果的。