通过CSS的定位有几种，分别相对于什么定位？

CSS 定位主要有五种，分别是：

  1. static (静态定位): 这是元素的默认定位方式。元素会按照正常的文档流进行排列，top、right、bottom、left 和 z-index 属性对它无效。 相对于: 文档流 中的正常位置。

  2. relative (相对定位): 元素相对于它在文档流中的 初始位置 进行偏移。原来的空间会被保留。 相对于: 自身原本的位置。

  3. absolute (绝对定位): 元素会脱离文档流，相对于 最近的非 static 定位的祖先元素 进行定位。如果所有祖先元素都是 static 定位，那么它会相对于 初始包含块 (initial containing block) 定位，通常是 <html> 元素。 相对于: 最近的非 static 定位的祖先元素，或者 初始包含块。

  4. fixed (固定定位): 元素会脱离文档流，相对于 浏览器窗口 进行定位。即使滚动页面，元素也会保持在固定位置。 相对于: 浏览器窗口。

  5. sticky (粘性定位): 元素在正常文档流中，直到它到达指定的阈值（例如，top: 0），然后它会像 fixed 定位一样固定在该位置。 相对于: 视口，在滚动到阈值之前相对于 自身原本的位置。

总结表格：

定位方式 相对对象 脱离文档流
static 文档流中的正常位置 否
relative 自身原本的位置 否
absolute 最近的非 static 定位的祖先元素，或初始包含块 是
fixed 浏览器窗口 是
sticky 视口（滚动到阈值后），之前相对于自身原本位置 否
posted @ 2024-12-13 06:07  王铁柱6  阅读(95)  评论(0)    收藏  举报