如何仅用CSS让元素显示在Twitter UI父级及同级元素之上？

代码示例 #

以下是在https://twitter.com/home上运行的代码：

let tweetArea = document.querySelector(".public-DraftStyleDefault-block");

const unlistedItems = document.createElement('ul');
unlistedItems.innerHTML += `
  <li> Option 0</li>
  <li> Option 1</li>
  <li> Option 2</li>
  <li> Option 3</li>`;
unlistedItems.style.position = 'absolute';
unlistedItems.style.top = '0';
unlistedItems.style.backgroundColor = "red";
unlistedItems.style.zIndex = '100';

tweetArea.parentNode.insertBefore(unlistedItems, tweetArea);

当前与预期效果 #

自定义元素已成功添加，但始终被父级及同级元素遮挡，无法正常显示。需求是让该元素能覆盖在Gif图标和工具栏上方，正常展示。

已尝试方案 #

已尝试设置极高的z-index值，但没有效果。同时查阅了多个关于元素层级堆叠的问题，尝试从父元素与子元素层级关系的角度寻找解决办法，但未解决问题。

解决方案 #

1. 检查并修改父元素的限制属性 #

Twitter编辑区域的父元素可能存在以下限制，导致子元素z-index失效：

• 父元素设置了position: relative/absolute/fixed且z-index值较低，形成独立堆叠上下文，子元素层级仅在该上下文内生效
• 父元素设置了overflow: hidden/scroll，裁剪超出范围的子元素

可通过以下代码修改父元素样式：

const parent = tweetArea.parentNode;
// 移除溢出裁剪
parent.style.overflow = 'visible';
// 取消父元素的堆叠上下文限制
parent.style.zIndex = 'auto';

2. 将自定义元素挂载到更高层级容器（推荐） #

把自定义ul直接挂载到body，避免受编辑区域父元素的堆叠上下文限制，同时基于编辑区域位置定位：

let tweetArea = document.querySelector(".public-DraftStyleDefault-block");
const rect = tweetArea.getBoundingClientRect();

const unlistedItems = document.createElement('ul');
unlistedItems.innerHTML += `
  <li> Option 0</li>
  <li> Option 1</li>
  <li> Option 2</li>
  <li> Option 3</li>`;
unlistedItems.style.position = 'fixed';
unlistedItems.style.top = `${rect.top}px`;
unlistedItems.style.left = `${rect.left}px`;
unlistedItems.style.backgroundColor = "red";
unlistedItems.style.zIndex = '9999';
unlistedItems.style.padding = '8px';
unlistedItems.style.listStyle = 'none';

document.body.appendChild(unlistedItems);

3. 强制创建独立堆叠上下文 #

如果必须挂载在原父元素下，可通过CSS属性为自定义元素创建新的堆叠上下文，突破父级限制：

unlistedItems.style.transform = 'translateZ(0)';
unlistedItems.style.willChange = 'transform';

内容的提问来源于stack exchange，提问作者a0m0rajab