CODEWITHSUNDEEP
jqueryhtmlcss
user3266289
user3266289

Reputation: 89

position fixed div below floating div

I'm working on a multilingual website and I want to position a fixed language menu div right under its icon. I'm using 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 -->

This is how to position it?

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

Right now the div is positioned relative to the viewport. How can I position it under its menu item?

this is the example

Upvotes: 0

Views: 200

Answers (2)

Destination Designs
Destination Designs

Reputation: 683

In order to position and element relative to another you must first position the parent element relative. then you can position the child as absolute

But...If you are using bootstrap why not just use bootstraps nav or 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>

Upvotes: 1

David Furlong
David Furlong

Reputation: 1683

position:fixed sets the positions relative to the window (as in scrolling won't move the element up or down the view). What you probably want is to set the position:relative. Could you be clearer on what behaviour you want?

Upvotes: 0

Related Questions