绝对定位

使用 position: relative 可使元素相对于原位置偏移而不脱离文档流。通过 top、left 等属性调整视觉位置，元素原有空间仍保留。例如设置 top: 20px; left: 10px; 元素向下右移动。推荐使用 top 和 left 控制方向，避免 left 与 right 或 t…

答案：通过CSS的Flexbox布局与关键帧动画实现图片轮播。首先构建包含多张图片的滑动容器，利用display: flex将图片水平排列，并设置容器overflow: hidden仅显示当前图；通过width扩展容器宽度适配所有图片，结合transform: translateX实现平滑位移；使用…

当元素同时设置float和position时，absolute或fixed定位会覆盖float，使其失效；而relative可与float共存，用于微调位置。例如侧边栏用float布局，内部按钮可通过absolute脱离浮动并精确定位。现代布局推荐使用Flexbox或Grid替代float，避免复杂…

定位方式决定包含块，包含块配合非-visible的overflow值才会裁剪内容。static或relative元素设overflow可裁剪非脱离文档流子元素；absolute元素受最近已定位祖先的overflow影响；fixed和sticky则视具体容器而定。常见问题如弹窗被截断，源于父级over…

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 …