CSS3-05 样式 4

前言

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

定位

• 概述

  • 定义元素位置的基准，即：该元素与 HTML 文档流 和 其他 HTML 元素的关系。

• 四种定位方式

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

• 四种定位方式比较

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