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

Question

I have an absolute div inside a relative div. 我在相对div内有一个绝对div。 It's essentially a container for a absolute positioned corner banner, on the top right side of the page. 实际上，它是页面右上角绝对定位的角标的容器。

It works fine with Chrome, but not with IE. 它可以在Chrome上正常运行，但不适用于IE。 In IE it appears positioned absolutely, but inside its container. 在IE中，它看起来绝对定位，但位于其容器内。 I'd like to override this, if possible, due to the way this site is built (complete template on a CMS): 由于网站的构建方式（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;
}

Thanks for reading and for any input. 感谢您的阅读和任何输入。

Cheers! 干杯!

Answer 1

That is correct behavior. 那是正确的行为。 Absolute position inside a relatively positioned element will be absolutely positioned relative to the containing element. 相对定位的元素内的绝对位置将相对于包含元素绝对定位。

Answer 2

Are you sure that the parent relative container is a div and not a td ? 您确定父相对容器是div而不是td吗？

EDIT 编辑

ok 好

This is not a CSS problem, but a bad HTML organization. 这不是CSS问题，而是不良的HTML组织。 So, if you want your element to be positioned by the window, and not by his relative parent coordonates, you must put it outside the relative element. 因此，如果您希望将元素放置在窗口中而不是通过其相对父对象坐标，则必须将其放置在相对元素之外。

Something like that : 像这样：

<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定位到相对DIV之外的页面

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-01-10 01:29:06

解决方案2
0 2012-01-10 01:17:02

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-01-10 01:29:06

解决方案2 0 2012-01-10 01:17:02

解决方案1
1 已采纳 2012-01-10 01:29:06

解决方案2
0 2012-01-10 01:17:02