jquery - 位置固定 div 低于 float div

Question

我在一个多语言网站上工作，我想在它的图标下方放置一个固定语言的菜单 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 是相对于视口(viewport)定位的。我怎样才能把它放在它的菜单项下？

this is the example

Answer 1

为了相对于另一个元素定位和元素，您必须首先相对于父元素定位。然后你可以将 child 定位为绝对

但是...如果您使用的是 Bootstrap ，为什么不直接使用 Bootstrap 导航或导航栏

<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>