相对定位

使用relative和absolute定位可实现元素层叠效果。首先将父容器设为position: relative，创建定位上下文；再将子元素设为position: absolute，使其脱离文档流并相对于父容器定位；通过top、right、bottom、left设定位置，配合z-index控制层级…

position: sticky 是 CSS 中一种结合相对定位与固定定位的布局方式，元素在滚动到设定阈值（如 top: 0）时吸附在视口特定位置。它仍属于文档流，常用于导航栏、表格表头冻结、侧边栏跟随等场景。使用时需设置 top、bottom 等偏移值，且父容器不能有 overflow: hidd…

使用absolute定位实现图片轮播，核心是让所有图片堆叠并通过opacity控制显隐。首先设置父容器position: relative，图片position: absolute并覆盖同一位置，默认opacity: 0，active类使当前图opacity: 1，配合transition实现淡入淡…

使用 position: absolute 可实现居中对话框，通过 top: 50%、left: 50% 配合 transform: translate(-50%, -50%) 精准定位，.modal 用 fixed 覆盖全屏并添加遮罩，.dialog 设置 z-index 确保层级在上，结合 Ja…

使用::before和::after伪元素可创建装饰性小图标，无需额外HTML标签。通过设置content、position、background、border和transform等属性，实现圆点、对勾、警告等视觉效果，常用于状态提示。关键步骤包括：父元素设position: relative，伪元…

答案：使用 position: sticky 可实现广告元素在滚动时固定于视口特定位置的效果，需设置 bottom、top 等偏移量，结合父容器布局控制位置，适用于内容区域中阶段性固定的场景。 在CSS中，使用 position: sticky 可以轻松实现浮动广告效果，让广告元素在页面滚动时固定在…

相对定位通过position: relative使元素相对于原位置偏移且保留原有空间，利用top、left等属性调整位置，常用于微调布局、作为绝对定位的包含块或配合z-index控制层级。 相对定位（relative positioning）在CSS中用于相对于元素原本的位置进行偏移，同时保留其在文…

Flex容器默认按主轴方向排列子元素，由flex-direction决定，默认row；2. justify-content、align-items和gap控制间距，可实现居中等布局；3. position: relative不脱离Flex流，可通过偏移调整位置，保留原有空间；4. position:…

定位在卡片布局中至关重要，通过 position 属性精确控制元素位置。1. relative 为子元素提供定位基准，用于微调内部结构且不破坏文档流；2. absolute 使标签、图标等脱离文档流，精准定位在角落并叠加于内容之上，常配合 z-index 控制层级；3. fixed 将操作按钮固定于…

使用CSS可实现无需JavaScript的悬浮提示框。通过相对定位容器、绝对定位提示文本，并利用:hover触发opacity和visibility的显示切换，配合transition实现淡入动画，再用伪元素添加箭头指向，即可完成简洁高效的Tooltip效果。 悬浮提示框（Tooltip）是一种常见…