将绝对 DIV 定位到相对 DIV 之外的页面答案

【问题标题】：Positioning absolute DIV to page outside of relative DIV将绝对 DIV 定位到相对 DIV 之外的页面
【发布时间】：2012-01-10 01:08:38
【问题描述】：

我在相对 div 中有一个绝对 div。它本质上是一个绝对定位的角落横幅的容器，位于页面的右上角。

它适用于 Chrome，但不适用于 IE。在 IE 中，它看起来是绝对定位的，但在它的容器内。如果可能的话，由于本网站的构建方式（CMS 上的完整模板），我想覆盖它：

#corner-banner a {
position: absolute;
right: 0;
top: 0;
display: block;
height: 200px;
width: 200px;
background: url(../images/down.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}

#corner-banner a:hover {
background: url(../images/up.png) no-repeat;
}

感谢您的阅读和任何意见。

干杯！

【问题讨论】：

我不太确定您在说什么，但听起来该网站在 IE 中的行为应如此。内部绝对定位的 div 位于父容器的右上角？这正是position: relative 所做的。这意味着设置为绝对的子项将相对于该容器而不是页面。并且在您的描述中，您正在谈论 div's 但您的 css 目标是 a's。
您好，感谢您的回复。关于 a 标签与 div，我只遇到了 div 的沙子问题，但使用 a 标签更好，即翻转行为。
关于 ie 和相关标签的预期行为 - 我明白这一点，但这正是我想要规避的。谢谢！
我看不出有什么不同。我们需要一个链接或 jsfiddle。

标签： css internet-explorer html css-position

【解决方案1】：

这是正确的行为。相对定位元素内的绝对位置将相对于包含元素进行绝对定位。

【讨论】：

【解决方案2】：

您确定父相关容器是 div 而不是 td 吗？

编辑

好的

这不是一个 CSS 问题，而是一个糟糕的 HTML 组织。所以，如果你想让你的元素被窗口定位，而不是被他的相对父坐标定位，你必须把它放在相对元素之外。

类似的东西：

<body>
  <div id="corner-banner" class="norelative_element">
    <!-- Your content with absolute position by the window !-->
    <a>...</a>
  </div>
  <div class="relative_element">
    <!-- Your content with relative position !-->
  </div>
</body>

【讨论】：

是的，它在一个 div 里面，而不是一个 table td。