13、CSS 定位与其他重要属性详解

CSS 定位与其他重要属性详解

1. CSS 定位

在网页布局中，HTML 元素默认遵循正常的内容流，这种定位方式被称为静态定位（static）。不过，通过设置 CSS 定位属性，如 position 、 top 、 right 、 bottom 和 left ，可以精确控制元素在浏览器页面上的位置。

1.1 position 属性值

• static ：这是默认值。正常元素、浮动元素和内联元素会按照 HTML 源代码中的顺序填充浏览器窗口。
• relative ：元素相对于其静态位置进行偏移，但它原本占据的空间会被保留，其他元素的位置不受影响。
• absolute ：元素从文档流中移除，并相对于某个祖先元素进行定位。它原本占据的空间会被其他元素填补，就好像该元素不存在一样。
• fixed ：元素同样从文档流中移除，但相对于浏览器窗口进行定位。它不会随文档内容滚动，常见于窗口顶部的工具栏或侧边、底部的反馈按钮。

1.2 包含元素的概念

不同定位方式下，元素的包含元素有所不同：
- 绝对定位的块元素，其包含元素是最近的非静态定位的祖先元素。若不存在这样的祖先元素，则包含元素为文档的 html </