将固定 div 定位在浮动 div 下方答案

【问题标题】：position fixed div below floating div将固定 div 定位在浮动 div 下方
【发布时间】：2020-10-05 22:24:18
【问题描述】：

我正在开发一个多语言网站，我想在其图标下方放置一个固定语言菜单 div。我正在使用 Bootstrap 3。

             <div class="menu-icon pull-right">
                <a id="lan-icon" href="#">
                    <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>   
                </a>
                <div id="list-lan" class="list-lan hidden">
                    <div class="row">
                        <ul>
                            <li><a href="">english</a></li>
                            <li><a href="">arabic</a></li>
                        </ul>
                    </div>
                </div>  
            </div><!-- menu-icon -->

这是怎么定位的？

div.list-lan {
    background: rgba(0,0,0,0.8);
    position: fixed;
    top: 38px;
    right: 0px;
    width: 20%;
    z-index: 888;
}

现在div 是相对于视口定位的。如何将其定位在其菜单项下？

this is the example

【问题讨论】：

标签： jquery html css

【解决方案1】：

为了定位和元素相对于另一个元素，你必须首先定位父元素的相对位置。那么你可以将孩子定位为绝对

但是...如果您使用引导程序，为什么不使用引导程序导航或导航栏

<ul class="nav">
    <li class="dropdown pull-right">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-globe"></i> Language</a>
     <ul class="dropdown-menu">
          <li><a href="">english</a></li>
          <li><a href="">arabic</a></li>
     </ul>
    </li>
    <li class="dropdown pull-right">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-search"></i> Search</a>
     <ul class="dropdown-menu">
          <li>Your Code Here for search</li>
     </ul>
    </li>     
</ul>

【讨论】：

我使用了这个解决方案，但我想对搜索图标做同样的事情
我已将其添加到答案中，如果您正在使用解决方案，请将其标记为已接受的答案！

【解决方案2】：

position:fixed 设置相对于窗口的位置（因为滚动不会在视图中向上或向下移动元素）。您可能想要的是设置位置：相对。你能更清楚你想要什么行为吗？

【讨论】：