CSS 固定/绝对定位到较早的亲戚？

Question

我猜这里有一种 super 特例。

我正在处理许多包含。现在我正在一个包含的内容文件中编码。我需要一个灯箱，它有一个 20% 的黑色背景覆盖整个页面，包括本身固定的标题，并在先前的 PHP 文件中设置为 z-index 200。

由于这些包含，#overlay-wrapper 被放置在 #content 中，这是由于其他原因 position: relative。包装器具有 100% 的宽度和高度以及 1000 的 z-index。不过，从逻辑上讲，它只覆盖内容区域而不是整个视口(viewport)。

基本上，我现在需要一种方法来告诉 #overlay-wrapper 相对于主体定位，而不告诉内容不是相对的，因为如前所述，我需要它是相对的例。

将叠加层放在另一个文件中会很痛苦，我很好奇是否可以告诉盒子相对于“较早的”父级定位，而不仅仅是他找到的第一个父级。

Answer 1

只要#overlay-wrapper在#content内并且#content相对定位，#overlay-wrapper 将始终相对于 #content 定位。如果不在 DOM 中重新定位 #overlay-wrapper，就无法解决这个问题。

您需要将 #overlay-wrapper 从 #content 中移出，或者通过修改您的 PHP 包含(甚至可能将其移动到自己的单独包含中)并将其包括在其他地方)，或者使用 JavaScript 在页面加载时重新定位它。