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是相对于视口的位置我怎么能把它放在它的菜单项下？

this is the example

Answer 1

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

但是......如果你使用bootstrap，为什么不使用bootstraps nav或navbar

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

Answer 2

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

固定div位于浮动div下方

2 个答案: