我正在使用多语种网站,我想在其下方定位一个固定语言菜单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是相对于视口的位置我怎么能把它放在它的菜单项下?
答案 0 :(得分: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>
答案 1 :(得分:0)
position:fixed设置相对于窗口的位置(如在滚动时不会将元素向上或向下移动视图)。你可能想要的是设置位置:相对。你能更清楚你想要的行为吗?