如果给定绝对位置，Firefox 和 Internet Explorer 不会相对于父级定位答案

【问题标题】：Firefox and Internet Explorer do not position relative to parent if given position absolute如果给定绝对位置，Firefox 和 Internet Explorer 不会相对于父级定位
【发布时间】：2012-08-23 20:40:50
【问题描述】：

我在带有position: relative; 的容器内遇到position: absolute; 的问题

我认为，默认行为是，具有position: absolute; 的子元素相对于其父容器定位自己，如果该元素具有position: absolute; 或position: relative;

在尝试此操作时，我发现 FF 和 IE（最新版本）显示出不同的行为，将内容放在页面上。

我想知道为什么？它涉及一个下拉菜单，其中子菜单由left: -9999px; 从视口中取出，而在悬停时它们会得到left: auto;

在 Chrome 中，它运行良好。很抱歉，如果这个问题已经被问过 - 但是使用这样的词来搜索只会显示位置的正常问题。

代码：

<div id="steuerung">
<ul>
  <li><a href="#">Link</a>

    <ul>
     <li><a href="#">Sublink</a> </li>
     <li><a href="#">Sublink</a> </li>
     <li><a href="#">Sublink</a> </li>
     <li><a href="#">Sublink</a> </li>
     <li><a href="#">Sublink</a></li>
    </ul>
  </li>
</ul>
</div>

CSS：

div#steuerung li {
    display: inline;
    list-style: none;
    position: relative;
}
div#steuerung ul li ul {
    position: absolute;
    left: -9999px;
    display: block;
    z-index: 2;
    width: 99%;
}
div#steuerung ul li:hover ul {
    left: auto;

}

在此处完成代码：www.step-town.com/new/

问候

【问题讨论】：

我已经加到上面了，不好意思。
Worked for me 在 FF 14 和 FF 15 上，应该如此。
甚至在网站上？（见上文）

标签： html css internet-explorer firefox css-position

【解决方案1】：

试试这个

http://jsfiddle.net/3Nh86/

我认为最好的方法是在您的 ul 子菜单上使用“display: none”和“display: block”，无需 Javascript。

【讨论】：