CSS固定/绝对定位到较早的相对位置？答案

【问题标题】：CSS Fixed / Absolute positioning to an earlier relative?CSS固定/绝对定位到较早的相对位置？
【发布时间】：2014-07-01 05:06:18
【问题描述】：

我猜这里有一种超级特例。

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

#overlay-wrapper 是，因为这些包括，放在#content，这是因为其他原因position: relative。包装器的宽度和高度为 100%，z-index 为 1000。不过，从逻辑上讲，它只覆盖内容区域，而不是整个视口。

基本上我现在需要一种方法来告诉#overlay-wrapper 相对于正文定位，而不告诉内容不是相对的，因为如前所述，在其他情况下我需要它是相对的。

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

【问题讨论】：

我认为您忘记发布代码了。 :) 至于问题，如果你可以访问 jQuery UI，你可以使用.position()。
一个绝对定位的元素总是相对于它拥有的第一个相对定位的父元素。当您说覆盖是 100% 的宽度和高度时，应该是屏幕还是#content div？如果是屏幕，那么只需将其设为固定而不是绝对，因为固定总是相对于视口定位

【解决方案1】：

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

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

【讨论】：