CSS3-05 样式 4

2022-09-25 13:43:14

前言

关于 CSS 的介绍，基本上告一段落了。在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素，显示在 Web 页面的位置。

定位

概述
- 定义元素位置的基准，即：该元素与 HTML 文档流和其他 HTML 元素的关系。
四种定位方式
- Static（静态定位）
  - 默认值（没有定位），元素出现在正常的 HTML 文档流中
  - 静态定位的元素不会受到 top、bottom、left、right 的影响
- Fixed（固定定位）
  - 元素相对于浏览器窗口的位置固定，即：固定在浏览器窗口的固定位置，即使窗口滚动也不会移动
  - 与 HTML 文档流无关，不占据空间
- Relative（相对定位）
  - 相对于元素正常位置的定位，其原本所占的空间不会改变
- Absolute（绝对定位）
  - 相对于最近已定位的父元素；若没有已定位的父元素，那么将相对于 <html>
  - 与 HTML 文档流无关，不占据空间
四种定位方式比较

|定位方式|是否与文档流有关|是否占据空间|是否可以重叠|是否受到 top、right、bottom、left 的影响|

|---|:---