绝对定位元素会导致元素在 IE 中内联显示答案

【问题标题】：Absolute positioning an element causes element to display inline in IE绝对定位元素会导致元素在 IE 中内联显示
【发布时间】：2009-08-18 03:44:33
【问题描述】：

我有一个列表，我希望主要元素垂直对齐，每个元素的子元素下拉到主要元素下方。我想在 subNav 类上保留 position: absolute ，因为这个导航的宽度会有所不同，所以我不能设置宽度。这在 Firefox 中有效，但在 IE 7 中，绝对会导致子导航显示内联（因此从我想要的位置向右和向上移动）。我该如何解决这个问题？

例子：

<style>
#nav ul, #nav li ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;    
    width: 120px;
    border-right: 1px solid #000;
    padding: 10px;
}
#nav li ul li {
    float: none;    
    width: auto;
    height: auto;
    border-right: none;
    text-align: left;
    padding: 0; 
}

#nav .subNav {  
    background: #eee;   
    position: absolute;
    padding: 10px;
}
</style>
</head>

<body>
<div id="nav">
    <ul>
    <li>Main One                
            <ul class="subNav">
        <li>Sub One A</li>
        <li>Sub One B</li>
        </ul>           
    </li>
    <li>Main Two    
        <ul class="subNav">
        <li>Sub Two A</li>
        <li>Sub Two B</li>
        </ul>
    </li>
    </ul>
</div>
</body>

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

不要忘记输入您的顶部和左侧值。

nav .subNav{
    top:10px;
    left:20px;
}

nav.containerDiv {
     position:relative;
}

HTML

<ul class="nav">
   <li>
      <div class="containerDiv">
         <ul class="subNav">...
      </div>
   </li>
</ul>

这将导致 subNav 相对于容器 div，而不是整个文档。

【讨论】：

但是如果我在 subNav 上放置一个左侧位置，它具有绝对定位，那么所有 subNav 项目将垂直出现在我不想要的同一个位置。我希望它们直接出现在对应的主要项目下方。
然后在 sub nav 列表周围放一个 div 并使该 div 具有相对位置：relative;并确保您的子导航 div 在该 div 内。 css 将做的是将定位绝对定位到具有相对位置或绝对位置的第一个父元素，在这种情况下，您的新 div。我将编辑回复以显示此内容