• 跳至主要内容
  • 跳至搜索
  • 跳至选择语言
MDN Web Docs
  • 参考
    • 概述 / Web 技术

      面向开发人员的 Web 技术参考

    • HTML

      Web 上内容的结构

    • CSS

      用于描述文档样式的代码

    • JavaScript

      通用脚本语言

    • HTTP

      传输 Web 资源的协议

    • Web API

      构建 Web 应用程序的接口

    • Web 扩展

      开发 Web 浏览器的扩展

    • Web 技术

      面向开发人员的 Web 技术参考

  • 指南
    • 概述 / MDN 学习区

      学习 Web 开发

    • MDN 学习区

      学习 Web 开发

    • HTML

      学习使用 HTML 构建 Web 内容

    • CSS

      学习使用 CSS 样式化内容

    • JavaScript

      学习在浏览器中运行脚本

    • 无障碍访问

      学习使 Web 对所有人无障碍访问

  • Plus
    • 概述

      定制化的 MDN 体验

    • AI 帮助

      获取实时帮助和支持

    • 更新

      一览所有浏览器兼容性更新

    • 文档

      了解如何使用 MDN Plus

    • 常见问题

      关于 MDN Plus 的常见问题

  • 课程
  • 博客
    • 游乐场

      编写、测试和分享您的代码

    • 新
      HTTP 观察站

      免费扫描网站

    • AI 帮助

      获取实时帮助和支持

  • 登录
  • 免费注册
  1. 参考
  2. CSS
  3. CSS 定位布局
    • 西班牙语
    • 法语
    • 日语
    • 韩语
    • 葡萄牙语 (巴西)
    • 中文 (简体)

本文内容

  • 参考
  • 指南
  • 规范
  1. CSS
  2. 教程
  3. CSS 基础
  4. CSS 初体验
    1. CSS 初体验概述
    2. 什么是 CSS？
    3. CSS 入门
    4. CSS 的结构
    5. CSS 的工作原理
    6. 评估：为传记页面设置样式
  5. CSS 构建块
    1. CSS 构建块概述
    2. CSS 选择器
    3. 类型、类和 ID 选择器
    4. 属性选择器
    5. 伪类和伪元素
    6. 组合器
    7. 层叠、特异性与继承
    8. 层叠级别
    9. 盒子模型
    10. 背景和边框
    11. 处理不同的文本方向
    12. 溢出的内容
    13. CSS 值和单位
    14. 在 CSS 中调整项目大小
    15. 图像、媒体和表单元素
    16. 表格样式
    17. 调试 CSS
    18. 组织 CSS
    19. 评估：CSS 基础理解
    20. 评估：创建漂亮的信纸
    21. 评估：一个很酷的盒子
  6. 文本样式
    1. 文本样式概述
    2. 基本的文本和字体样式
    3. 列表样式
    4. 链接样式
    5. 网络字体
    6. 评估：为社区学校主页排版
  7. CSS 布局
    1. CSS 布局概述
    2. CSS 布局简介
    3. 正常流
    4. Flexbox
    5. 网格
    6. 浮动
    7. 定位
    8. 多列布局
    9. 响应式设计
    10. 媒体查询初学者指南
    11. 传统布局方法
    12. 支持旧版浏览器
    13. 评估：布局基础理解
  8. 参考
  9. 模块
    1. CSS 锚点定位
    2. CSS 动画
    3. CSS 背景和边框
    4. CSS 基本用户界面
    5. CSS 盒子对齐
    6. CSS 盒子模型
    7. CSS 盒子大小
    8. CSS 层叠和继承
    9. CSS 自定义属性（用于级联变量）
    10. CSS 颜色调整
    11. CSS 颜色
    12. CSS 合成和混合
    13. CSS 条件规则
    14. CSS 包含
    15. CSS 计数器样式
    16. CSS 显示
    17. CSS 滤镜效果
    18. CSS 弹性盒子布局
    19. CSS 字体加载
    20. CSS 字体
    21. CSS 分段
    22. CSS 生成内容
    23. CSS 网格布局
    24. CSS 图像
    25. CSS 列表和计数器
    26. CSS 逻辑属性和值
    27. CSS 遮罩
    28. CSS 媒体查询
    29. CSS 运动路径
    30. CSS 多列布局
    31. CSS 命名空间
    32. CSS 嵌套
    33. CSS 溢出
    34. CSS 滚动过度行为
    35. CSS 分页媒体
    36. CSS 定位布局
    37. CSS 属性和值 API
    38. CSS 伪元素
    39. CSS ruby 布局
    40. CSS 作用域
    41. CSS 滚动驱动的动画
    42. CSS 滚动捕捉
    43. CSS 滚动条样式
    44. CSS 选择器
    45. CSS 阴影部件
    46. CSS 形状
    47. CSS 语法
    48. CSS 表格
    49. CSS 文本
    50. CSS 文本装饰
    51. CSS 变换
    52. CSS 过渡
    53. CSS 视图过渡
    54. CSS 书写模式
    55. CSSOM 视图
  10. 属性
    1. -moz-*
      1. -moz-float-edge 非标准 已弃用
      2. -moz-force-broken-image-icon 非标准 已弃用
      3. -moz-image-region 非标准
      4. -moz-orient 非标准
      5. -moz-user-focus 非标准 已弃用
      6. -moz-user-input 非标准 已弃用
    2. -webkit-*
      1. -webkit-border-before 非标准
      2. -webkit-box-reflect 非标准
      3. -webkit-line-clamp
      4. -webkit-mask-box-image 非标准
      5. -webkit-mask-composite 非标准
      6. -webkit-mask-position-x 非标准
      7. -webkit-mask-position-y 非标准
      8. -webkit-mask-repeat-x 非标准
      9. -webkit-mask-repeat-y 非标准
      10. -webkit-tap-highlight-color 非标准
      11. -webkit-text-fill-color
      12. -webkit-text-security 非标准
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout 非标准
    3. accent-color
    4. align-*
      1. align-content
      2. align-items
      3. align-self
    5. all
    6. anchor-name 实验性功能
    7. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range 实验性功能
      11. animation-range-end 实验性功能
      12. animation-range-start 实验性功能
      13. animation-timeline 实验性功能
      14. animation-timing-function
    8. appearance
    9. aspect-ratio
    10. backdrop-filter
    11. backface-visibility
    12. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    13. block-size
    14. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    15. bottom
    16. box-*
      1. box-align 非标准 已弃用
      2. box-decoration-break
      3. box-direction 非标准 已弃用
      4. box-flex 非标准 已弃用
      5. box-flex-group 非标准 已弃用
      6. box-lines 非标准 已弃用
      7. box-ordinal-group 非标准 已弃用
      8. box-orient 非标准 已弃用
      9. box-pack 非标准 已弃用
      10. box-shadow
      11. box-sizing
    17. break-*
      1. break-after
      2. break-before
      3. break-inside
    18. caption-side
    19. caret-color
    20. clear
    21. clip-*
      1. clip 已弃用
      2. clip-path
      3. clip-rule
    22. color-*
      1. color
      2. color-interpolation
      3. color-interpolation-filters
      4. color-scheme
    23. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    24. columns
    25. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    26. container-*
      1. container
      2. container-name
      3. container-type
    27. content
    28. content-visibility
    29. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    30. cursor
    31. cx
    32. cy
    33. d
    34. direction
    35. display
    36. dominant-baseline
    37. empty-cells
    38. field-sizing 实验性功能
    39. fill-*
      1. fill
      2. fill-opacity
      3. fill-rule
    40. filter
    41. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    42. float
    43. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-smooth 非标准
      11. font-stretch
      12. font-style
      13. font-synthesis
      14. font-synthesis-position
      15. font-synthesis-small-caps
      16. font-synthesis-style
      17. font-synthesis-weight
      18. font-variant
      19. font-variant-alternates
      20. font-variant-caps
      21. font-variant-east-asian
      22. font-variant-emoji
      23. font-variant-ligatures
      24. font-variant-numeric
      25. font-variant-position
      26. font-variation-settings
      27. font-weight
    44. forced-color-adjust
    45. gap
    46. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    47. hanging-punctuation
    48. height
    49. hyphenate-character
    50. hyphenate-limit-chars
    51. hyphens
    52. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution 实验性功能
    53. initial-letter
    54. inline-size
    55. inset-*
      1. inset
      2. inset-block
      3. inset-block-end
      4. inset-block-start
      5. inset-inline
      6. inset-inline-end
      7. inset-inline-start
    56. isolation
    57. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    58. left
    59. letter-spacing
    60. line-*
      1. line-break
      2. line-height
      3. line-height-step 实验性功能
    61. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    62. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. margin-trim 实验性功能
    63. marker-*
      1. marker
      2. marker-end
      3. marker-mid
      4. marker-start
    64. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    65. masonry-auto-flow 实验性功能
    66. math-*
      1. math-depth
      2. math-shift 实验性功能
      3. math-style
    67. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    68. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    69. mix-blend-mode
    70. object-fit
    71. object-position
    72. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. offset-position
      6. offset-rotate
    73. opacity
    74. order
    75. orphans
    76. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    77. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    78. overlay 实验性功能
    79. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    80. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    81. page-*
      1. page
      2. page-break-after
      3. page-break-before
      4. page-break-inside
    82. paint-order
    83. perspective
    84. perspective-origin
    85. place-*
      1. place-content
      2. place-items
      3. place-self
    86. pointer-events
    87. position-*
      1. position
      2. position-anchor 实验性功能
      3. position-area 实验性功能
      4. position-try 实验性功能
      5. position-try-fallbacks 实验性功能
      6. position-try-order 实验性功能
      7. position-visibility 实验性功能
    88. print-color-adjust
    89. quotes
    90. r
    91. resize
    92. right
    93. rotate
    94. row-gap
    95. ruby-align
    96. ruby-position
    97. rx
    98. ry
    99. scale
    100. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-padding
      14. scroll-padding-block
      15. scroll-padding-block-end
      16. scroll-padding-block-start
      17. scroll-padding-bottom
      18. scroll-padding-inline
      19. scroll-padding-inline-end
      20. scroll-padding-inline-start
      21. scroll-padding-left
      22. scroll-padding-right
      23. scroll-padding-top
      24. scroll-snap-align
      25. scroll-snap-stop
      26. scroll-snap-type
      27. scroll-timeline 实验性功能
      28. scroll-timeline-axis 实验性功能
      29. scroll-timeline-name 实验性功能
    101. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    102. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
      4. shape-rendering
    103. stop-color
    104. stop-opacity
    105. stroke-*
      1. stroke
      2. stroke-dasharray
      3. stroke-dashoffset
      4. stroke-linecap
      5. stroke-linejoin
      6. stroke-miterlimit
      7. stroke-opacity
      8. stroke-width
    106. tab-size
    107. table-layout
    108. text-*
      1. text-align
      2. text-align-last
      3. text-anchor
      4. text-combine-upright
      5. text-decoration
      6. text-decoration-color
      7. text-decoration-line
      8. text-decoration-skip 实验性功能
      9. text-decoration-skip-ink
      10. text-decoration-style
      11. text-decoration-thickness
      12. text-emphasis
      13. text-emphasis-color
      14. text-emphasis-position
      15. text-emphasis-style
      16. text-indent
      17. text-justify
      18. text-orientation
      19. text-overflow
      20. text-rendering
      21. text-shadow
      22. text-size-adjust 实验性功能
      23. text-spacing-trim 实验性功能
      24. text-transform
      25. text-underline-offset
      26. text-underline-position
      27. text-wrap
      28. text-wrap-mode
      29. text-wrap-style
    109. timeline-scope 实验性功能
    110. top
    111. touch-action
    112. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    113. transition-*
      1. transition
      2. transition-behavior
      3. transition-delay
      4. transition-duration
      5. transition-property
      6. transition-timing-function
    114. translate
    115. unicode-bidi
    116. user-modify 非标准 已弃用
    117. user-select
    118. vector-effect
    119. vertical-align

    120. view-*
      1. view-timeline 实验性
      2. view-timeline-axis 实验性
      3. view-timeline-inset 实验性
      4. view-timeline-name 实验性
      5. view-transition-name
    121. visibility
    122. white-space
    123. white-space-collapse
    124. widows
    125. width
    126. will-change
    127. word-break
    128. word-spacing
    129. writing-mode
    130. x
    131. y
    132. z-index
    133. zoom
  11. 选择器
    1. 属性选择器
    2. 类选择器
    3. ID 选择器
    4. & 嵌套选择器
    5. 类型选择器
    6. 通用选择器
  12. 组合器
    1. 子代组合符
    2. 列组合符 实验性
    3. 后代组合符
    4. 命名空间分隔符
    5. 紧邻兄弟组合符
    6. 选择器列表
    7. 后续兄弟组合符
  13. 伪类
    1. :-moz-broken 非标准 已弃用
    2. :-moz-drag-over 非标准
    3. :-moz-first-node 实验性 非标准
    4. :-moz-handler-blocked 非标准
    5. :-moz-handler-crashed 非标准
    6. :-moz-handler-disabled 非标准
    7. :-moz-last-node 实验性 非标准
    8. :-moz-loading 非标准
    9. :-moz-locale-dir(ltr) 非标准
    10. :-moz-locale-dir(rtl) 非标准
    11. :-moz-only-whitespace 非标准
    12. :-moz-submit-invalid 非标准
    13. :-moz-suppressed 非标准
    14. :-moz-user-disabled 非标准
    15. :-moz-window-inactive 非标准
    16. :active
    17. :any-link
    18. :autofill
    19. :blank 实验性
    20. :buffering
    21. :checked
    22. :current
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has()
    38. :host
    39. :host-context()
    40. :host()
    41. :hover
    42. :in-range
    43. :indeterminate
    44. :invalid
    45. :is()
    46. :lang()
    47. :last-child
    48. :last-of-type
    49. :left
    50. :link
    51. :local-link
    52. :modal
    53. :muted
    54. :not()
    55. :nth-child()
    56. :nth-last-child()
    57. :nth-last-of-type()
    58. :nth-of-type()
    59. :only-child
    60. :only-of-type
    61. :optional
    62. :out-of-range
    63. :past
    64. :paused
    65. :picture-in-picture
    66. :placeholder-shown
    67. :playing
    68. :popover-open
    69. :read-only
    70. :read-write
    71. :required
    72. :right
    73. :root
    74. :scope
    75. :seeking
    76. :stalled
    77. :state()
    78. :target
    79. :target-within 实验性
    80. :user-invalid
    81. :user-valid
    82. :valid
    83. :visited
    84. :volume-locked
    85. :where()
  14. 伪元素
    1. ::-moz-color-swatch 非标准
    2. ::-moz-focus-inner 实验性 非标准
    3. ::-moz-list-bullet 实验性 非标准
    4. ::-moz-list-number 实验性 非标准
    5. ::-moz-meter-bar 非标准
    6. ::-moz-progress-bar 实验性 非标准
    7. ::-moz-range-progress 非标准
    8. ::-moz-range-thumb 非标准
    9. ::-moz-range-track 非标准
    10. ::-webkit-inner-spin-button 非标准
    11. ::-webkit-meter-bar 非标准 已弃用
    12. ::-webkit-meter-even-less-good-value 非标准
    13. ::-webkit-meter-inner-element 非标准
    14. ::-webkit-meter-optimum-value 非标准
    15. ::-webkit-meter-suboptimum-value 非标准
    16. ::-webkit-progress-bar 非标准
    17. ::-webkit-progress-inner-element 非标准
    18. ::-webkit-progress-value 非标准
    19. ::-webkit-scrollbar 非标准
    20. ::-webkit-search-cancel-button 非标准
    21. ::-webkit-search-results-button 非标准
    22. ::-webkit-slider-runnable-track 实验性
    23. ::-webkit-slider-thumb 实验性
    24. ::after
    25. ::backdrop
    26. ::before
    27. ::cue
    28. ::file-selector-button
    29. ::first-letter
    30. ::first-line
    31. ::grammar-error
    32. ::highlight()
    33. ::marker
    34. ::part()
    35. ::placeholder
    36. ::selection
    37. ::slotted()
    38. ::spelling-error
    39. ::target-text 实验性
    40. ::view-transition
    41. ::view-transition-group
    42. ::view-transition-image-pair
    43. ::view-transition-new
    44. ::view-transition-old
  15. At规则
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document 非标准 已弃用
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page

    15. @position-try 实验性
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition 实验性
  16. 函数
    1. -moz-image-rect 非标准 已弃用
    2. abs()
    3. acos()
    4. anchor-size() 实验性
    5. anchor() 实验性
    6. asin()
    7. atan()
    8. atan2()
    9. attr()
    10. blur()
    11. brightness()
    12. calc()
    13. circle()
    14. clamp()
    15. color-contrast() 实验性
    16. color-mix()
    17. color()
    18. conic-gradient()
    19. contrast()
    20. cos()
    21. counter()
    22. counters()
    23. cross-fade()
    24. device-cmyk()
    25. drop-shadow()
    26. element() 实验性
    27. ellipse()
    28. env()
    29. exp()
    30. fit-content()
    31. grayscale()
    32. hsl()
    33. hue-rotate()
    34. hwb()
    35. hypot()
    36. image-set()
    37. image()
    38. inset()
    39. invert()
    40. lab()
    41. lch()
    42. light-dark()
    43. linear-gradient()
    44. log()
    45. matrix()
    46. matrix3d()
    47. max()
    48. min()
    49. minmax()
    50. mod()
    51. oklab()
    52. oklch()
    53. opacity()
    54. paint()
    55. palette-mix() 实验性
    56. path()
    57. perspective()
    58. polygon()
    59. pow()
    60. radial-gradient()
    61. ray()
    62. rect()
    63. rem()
    64. repeat()
    65. repeating-conic-gradient()
    66. repeating-linear-gradient()
    67. repeating-radial-gradient()
    68. rgb()
    69. rotate()
    70. rotate3d()
    71. rotateX()
    72. rotateY()
    73. rotateZ()
    74. round()
    75. saturate()
    76. scale()
    77. scale3d()
    78. scaleX()
    79. scaleY()
    80. scaleZ()
    81. scroll() 实验性
    82. sepia()
    83. shape() 实验性
    84. sign()
    85. sin()
    86. skew()
    87. skewX()
    88. skewY()
    89. sqrt()
    90. symbols()
    91. tan()
    92. translate()
    93. translate3d()
    94. translateX()
    95. translateY()
    96. translateZ()
    97. url()
    98. var()
    99. view() 实验性
    100. xywh()
  17. 类型
    1. <absolute-size>
    2. <alpha-value>
    3. <angle>
    4. <angle-percentage>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency>
    25. <frequency-percentage>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue>
    30. <hue-interpolation-method>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length>
    35. <length-percentage>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area> 实验性
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> 已弃用
    47. <string>
    48. <system-color>
    49. <time>
    50. <time-percentage>
    51. <transform-function>
  18. 指南
  19. 动画
    1. 使用 CSS 动画
  20. 背景和边框
    1. 使用多个背景
    2. 调整背景图像大小
  21. 盒子对齐
    1. 块级布局中的盒子对齐
    2. Flexbox 中的盒子对齐
    3. Grid 布局中的盒子对齐
    4. 多列布局中的盒子对齐
  22. 盒子模型
    1. CSS 基本盒子模型简介
    2. 掌握边距折叠
  23. 颜色
    1. 将颜色应用于 HTML 元素
    2. 颜色值
    3. 使用相对颜色
    4. 明智地使用颜色
    5. 无障碍：了解颜色和亮度
    6. 无障碍：颜色对比度
  24. 列
    1. Multicol 的基本概念
    2. 设置列的样式
    3. 跨列和平衡
    4. 处理 Multicol 中的溢出
    5. Multicol 中的内容断开
  25. 条件规则
    1. 使用特性查询
  26. 容器
    1. 使用 CSS 容器
    2. CSS 容器查询
    3. 使用容器大小和样式查询
  27. CSSOM 视图
    1. 坐标系
  28. Flexbox
    1. Flexbox 的基本概念
    2. 与其他布局方法的比较
    3. 在 Flex 容器中对齐项目
    4. 排序 Flex 项目
    5. 控制 Flex 项目比率
    6. 掌握 Flex 项目的换行
    7. Flexbox 的典型用例
  29. 流布局
    1. 普通流中的块级和内联布局
    2. 在流中和在流外
    3. 格式化上下文解释
    4. 流布局和书写模式
    5. 流布局和溢出
  30. 字体
    1. OpenType 字体特性指南
    2. 可变字体指南
  31. 网格
    1. 网格布局的基本概念
    2. 与其他布局方法的关系
    3. 基于行的放置
    4. 网格模板区域
    5. 使用命名网格线进行布局
    6. 网格布局中的自动放置
    7. Grid 布局中的盒子对齐
    8. 网格、逻辑值和书写模式
    9. 网格布局和无障碍
    10. 网格布局和渐进增强
    11. 使用网格实现常见布局
    12. 子网格
    13. 砌体布局
  32. 图像
    1. 使用 CSS 渐变
  33. 列表和计数器
    1. 使用 CSS 计数器
    2. 一致的列表缩进
  34. 逻辑属性
    1. 基本概念
    2. 浮动和定位
    3. 边距、边框和填充
    4. 大小调整
  35. 数学函数
    1. 使用 CSS 数学函数
  36. 媒体查询
    1. 使用媒体查询
    2. 使用媒体查询实现无障碍
    3. 以编程方式测试媒体查询
    4. 打印
  37. 嵌套样式规则
    1. 使用 CSS 嵌套
    2. 嵌套 @规则
    3. 嵌套和特异性
  38. 定位
    1. 了解 CSS z-index
  39. 滚动捕捉
    1. 滚动捕捉的基本概念
  40. 形状
    1. 形状概述
    2. 来自盒子值的形状
    3. 基本形状
    4. 来自图像的形状
  41. 文本
    1. 换行和断行文本
  42. 变换
    1. 使用变换
  43. 过渡
    1. 使用过渡
  44. 布局食谱
    1. 媒体对象
    2. 列
    3. 居中元素
    4. 粘性页脚
    5. 拆分导航
    6. 面包屑导航
    7. 带有徽章的列表组
    8. 分页
    9. 卡片
    10. 网格包装器
  46. 工具
    1. 颜色选择器
    2. 阴影生成器
    3. 边框图像生成器
    4. 圆角生成器

本文内容

  • 参考
  • 指南
  • 规范

CSS 定位布局

**CSS 定位布局**模块定义了如何在网页上定位元素。

参考

属性

  • top
  • right
  • bottom
  • left
  • inset
  • inset-inline
  • inset-inline-start
  • inset-inline-end
  • inset-block
  • inset-block-start
  • inset-block-end
  • float
  • clear
  • position
  • z-index
  • transform

指南

了解 z-index

介绍了堆叠上下文的概念，并解释了 z 顺序的工作原理，并提供了一些示例。

规范

规范
CSS 定位布局模块 Level 3

帮助改进 MDN

了解如何贡献.

此页面最后修改于 2023 年 5 月 25 日 由 MDN 贡献者.

在 GitHub 上查看此页面 • 报告此内容的问题
MDN logo

您构建更美好互联网的蓝图。

  • MDN 在 Mastodon 上
  • MDN 在 X（前身为 Twitter）上
  • MDN 在 GitHub 上
  • MDN 博客 RSS Feed

MDN

  • 关于
  • 博客
  • 职业
  • 与我们合作广告

支持

  • 产品帮助
  • 报告问题

我们的社区

  • MDN 社区
  • MDN 论坛
  • MDN 聊天

开发者

  • Web 技术
  • 学习 Web 开发
  • MDN Plus
  • Hacks 博客
Mozilla logo
  • 网站隐私声明
  • Cookie
  • 法律
  • 社区参与指南

访问 Mozilla 公司的 非营利母公司， Mozilla 基金会.
此内容的部分内容版权所有 ©1998–2024由各个 mozilla.org 贡献者提供。内容根据 知识共享许可证

.