构建网页时,基本的布局模型是盒子模型(Box Model),每个 HTML 元素都可以看作一个矩形的盒子,其大小由元素的 width、height、padding、border 和 margin 属性来定义。
1. Static(默认值)
static
是元素的默认定位方式,即元素按照正常的文档流进行排列。
2. Relative(相对定位)
relative
定位是相对于元素在文档流中的原始位置进行定位。
3. Absolute(绝对定位)
absolute
定位是相对于最近的已定位(即非static
)祖先元素进行定位。如果没有这样的元素,则相对于<html>
(即初始包含块)进行定位。
4. Fixed(固定定位)
fixed
定位是相对于浏览器窗口进行定位的,即使页面滚动,元素也会停留在固定位置。
5. Sticky(粘性定位)
sticky
定位是介于relative
和fixed
定位之间的一种定位方式。元素根据正常文档流进行定位,直到滚动到某个阈值点为止,然后表现得像fixed
定位一样。