真正用于网页广告悬浮窗的是position: fixed，而非requestPictureInPicture()；后者仅适用于video元素且无法自定义样式与位置，而fixed方案可精准控制位置、尺寸、交互及兼容性。

HTML网页画中画广告 ≠ 浏览器原生 requestPictureInPicture()，后者只适用于 元素且无法自定义位置/尺寸；真正在新闻页、文章页里“浮动展示广告”的，是用 position: fixed 实现的悬浮窗，不是 PiP。

用 position: fixed 写悬浮广告窗（最常用）

这是绝大多数网站实际采用的方式：脱离文档流、固定在视口某处、可关可拖、兼容所有浏览器。

• 必须同时设置 position: fixed + 至少一个定位属性（如 top、right、bottom、left），否则元素会堆在左上角
• z-index 至少设为 9999，否则容易被导航栏、轮播图、transform 容器等遮盖
• 移动端慎用 top: 20px; right: 20px——小屏下右上角难触达，推荐 bottom: 10px; left: 50%; transform: translateX(-50%) 居中底部
• 关闭按钮建议用内联 JS：onclick="this.parentElement.style.display='none'"，简单直接；若需持久化（刷新不出现），得配合 localStorage

为什么 requestPictureInPicture() 不适合做广告浮窗

它本质是调用操作系统级视频浮层，网页完全失去控制权。广告场景下几乎不可用。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 只能作用于 元素，不能套
  或图片广告
• 无法设置尺寸、位置、圆角、阴影等样式；::picture-in-picture-window 伪类仅支持极少数基础样式（Chrome 120+ 才开始有限支持）
• 触发强依赖用户手势（click/touchend），且视频必须已加载元数据（loadedmetadata 事件后）、非跨域或带 crossorigin="anonymous"
• 移动端 Safari 要求视频已播放过一次，否则静默失败，错误信息常为 DOMException: Picture in Picture is not available

避免被当成干扰内容（SEO & 用户体验）

Google Search Console 明确将遮挡主内容的大面积 fixed 广告列为“干扰性内容”，可能影响排名。

• 加 aria-hidden="true" role="presentation" 到广告容器，向辅助技术表明它不是主内容
• 避开
  区域正上方、表单提交按钮正前方等关键交互区
• 不要在 里内联大量广告 JS；用 IntersectionObserver 或滚动阈值延迟加载
• 如果广告窗覆盖了移动端的软键盘弹出区域（比如 bottom: 0），iOS 上可能触发页面意外缩放

真正可控的“小窗广告”从来不是靠 PiP，而是用 position: fixed + transform + pointer-events 模拟出来的——系统 PiP 只该作为视频内容的备用播放模式，而非广告载体。