绝对定位

visibility: hidden 隐藏元素但保留空间，display: none 彻底移除元素且不占空间；前者可通过 visibility: visible 恢复，后者需恢复原 display 值；性能上 visibility 更优，因不触发回流；opacity: 0 和 clip-path 等…

使用 Flexbox、绝对定位+transform、Grid 或 text-align/line-height 可实现居中。1. Flexbox 最推荐，父容器设 display: flex，justify-content: center 和 align-items: center；2. 绝对定位配…

使用 relative 和 absolute 实现悬浮遮罩，父元素设为 relative，子元素 absolute 定位并隐藏，hover 时显示；2. 利用 relative 配合 top 或 transform 实现按钮上移动画，增强交互感；3. 通过 relative 容器与 absolute…

相对定位通过position: relative使元素相对于原位置偏移，示例中.box下移20px、右移10px，元素仍占原空间，常用于微调布局或为绝对定位提供参照，如.button上移5px不影响其他元素。 在CSS中，相对定位（relative） 是指元素相对于它在正常文档流中的原始位置进行偏移…

答案：CSS中position属性定义元素定位方式，包含static（默认，按文档流布局）、relative（相对原位置偏移，保留占位）、absolute（脱离文档流，相对已定位祖先定位）、fixed（相对于视口固定，不随滚动移动）、sticky（滚动到阈值时在relative和fixed间切换），…

子元素使用 position: absolute 或 float 脱离文档流后，父元素无法感知其尺寸，导致高度塌陷。例如，当 .child 设置为 absolute 时，.parent 因无其他常规流内容而高度为 0。解决方法包括：1. 为父元素设置 min-height 并配合 relative …

z-index需配合非static的position使用，通过整数值控制元素堆叠顺序，数值越大越靠前，但受堆叠上下文限制，各上下文内独立比较层级。 在CSS中，控制元素的层级主要依靠 z-index 属性，但它必须和 position 属性配合使用才能生效。下面详细说明它们如何结合使用来管理页面元素…

CSS定位通过position属性精确控制元素位置，尤其在多层嵌套布局中。1. 相对定位（relative）的祖先作为绝对定位（absolute）子元素的参考框；2. 若无已定位祖先，绝对定位元素相对视口定位；3. 常见模式是父级设relative，子级用absolute进行局部精确定位；4. 深层…

定位方式决定元素布局行为：static遵循文档流，盒模型按标准计算；relative相对偏移但不脱离文档流；absolute脱离文档流，相对于最近已定位祖先定位；fixed相对于视口固定；sticky在滚动阈值内表现如relative，超出后如fixed。 在CSS布局中，定位（position）不…

答案是Flexbox、Grid和绝对定位配合transform是实现水平垂直居中的核心方法。Flexbox适用于一维布局，通过justify-content和align-items实现居中；Grid利用place-items: center在二维布局中简洁居中；绝对定位加transform则适合脱离…