Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS几种定位的规则、定位参照物、对文档流的影响 #3

Open
Daotin opened this issue Aug 16, 2024 · 0 comments
Open

CSS几种定位的规则、定位参照物、对文档流的影响 #3

Daotin opened this issue Aug 16, 2024 · 0 comments
Labels
css

Comments

@Daotin
Copy link
Owner

Daotin commented Aug 16, 2024

  1. 静态定位 (static)：

    • 规则：默认定位，元素按文档流正常排列。
    • 定位参照物：无。
    • 对文档流影响：不影响，元素保持在文档流中。
    • 应用场景：默认使用，适合大部分情况。

  2. 相对定位 (relative)：

    • 规则：相对于元素自身的原始位置进行偏移。
    • 定位参照物：元素自身的位置。
    • 对文档流影响：占据原位置，不脱离文档流。具体来说，当你使用 position: relative 时，该元素会保持在文档流中的原始位置，但你可以使用 left、right、top 和 bottom 属性来调整该元素相对于其原始位置的偏移量。元素仍然会占据其在文档流中的原始位置，只是视觉上会移动。所以，可能导致覆盖到其他元素。
    • 应用场景：对元素做微调，保持其在文档流中的位置。

  3. 绝对定位 (absolute)：

    • 规则：相对于最近的已定位祖先元素（relative、absolute或fixed）进行定位；若无，则相对于<html>定位。
    • 定位参照物：最近的已定位祖先元素或<html>。
    • 对文档流影响：脱离文档流，不占据空间。
    • 应用场景：需要精确控制元素位置的场景，如浮动面板或弹出框。

  4. 固定定位 (fixed)：

    • 规则：相对于浏览器窗口进行定位。
    • 定位参照物：浏览器窗口。
    • 对文档流影响：脱离文档流，不占据空间。
    • 应用场景：固定在页面某个位置不随滚动条滚动，如固定导航栏。

  5. 粘性定位 (sticky)：

    • 规则：元素在跨越某个阈值前表现为相对定位，超出阈值后表现为固定定位。比如，top: 10px 是相对于视口顶部的偏移量，而不是相对于其父元素或其他元素。当元素达到这个偏移位置时，它就会“粘”在那个位置。
    • 定位参照物：最近的滚动容器（通常是<html>）。
    • 对文档流影响：占据空间，但在特定条件下会脱离文档流。
    • 应用场景：如表头随滚动固定在顶部的效果。
@Daotin Daotin added the css label Aug 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Daotin