与“相对定位”相关的TAG标签
HTML5无法直接播放RTSP或叠加logo，必须在服务端转流时用ffmpeg（-vfoverlay）或WebRTCworker层处理；前端CSS叠加仅为视觉覆盖，不防篡改且投屏消失。
HTML5无图层概念，图片叠加依赖CSS的position、z-index与堆叠上下文；常用绝对定位+父相对定位+z-index控制顺序；Grid/Flex适合响应式布局；Canvas适用于动态合成；需警惕stackingcontext误创建导致z-index失效。
用position:fixed居中模态框必须配合transform:translate(-50%,-50%)，因top:50%和left:50%仅定位元素左上角到屏幕中心，translate才使其整体中心对齐；该方案兼容未知宽高，但祖先元素含transform等属性会导致fixed失效。
本文详解如何解决英雄横幅使用position:absolute导致后续内容重叠的问题，核心是恢复文档流——将横幅容器设为相对定位（relative），内部文字保持绝对定位，而下方内容区域采用默认静态定位（static），确保自然流式排列。
本文介绍如何通过监听点击事件的鼠标坐标，动态计算并定位弹出气泡框的位置，使其显示在图像热点旁而非覆盖其上，从而提升交互体验与可读性。
在Flex容器中对子元素使用position:absolute或position:relative时，它看似“不听flex布局的话”，比如脱离了justify-content或align-items的控制——这不是bug，而是CSS规范的明确行为：定位（position）会绕过Flex布局的主轴/交...
图片文字叠加布局的关键是父容器设position:relative，子元素用absolute定位并配合z-index控制层级，再用transform实现居中及响应式适配。
通过为父元素（如.item1）设置overflow:hidden，可限制子元素动画的可见区域，使其严格在父容器边界内进出，避免从页面边缘开始或结束。
当文本域因内容增加而自动扩展时，使用position:relative硬编码偏移的按钮会脱离文档流，导致错位或重叠；正确方案是通过语义化布局（如Flex容器+display:contents）使按钮与文本域形成视觉和逻辑上的关联流动关系。
模态类名必须匹配框架预设规则，如Bootstrap需modal+fade+show协同生效，Tailwind需手动控制显隐与层级；定位须用fixed+inset-0，避免relative/absolute；须同步处理aria-hidden、焦点管理及z-index层叠上下文。
