title: How to position options of select box
body: <p>I have a select box below a header. Header is fixed header at the top of the page. When I click on it and when first option is selected it shows nicely.(could not add more link as I do not have much reputation)</p>
  
  <p>Lets say I selected second option. Now when I click on the select box to change option the top part of option list goes behind the fixed headed.</p>
  
  <p><a href="http://i.stack.imgur.com/3SHTJ.png" rel="nofollow">top part behind fixed header</a></p>
  
  <p>What css style should I  use to display the option list properly.</p>
  
  <p>I am using bootstrap 3 and select box is from angular material.</p>
  
  <p>Right now I am using a very high z-index value to show it.</p>
  
  <p>Below is code for header</p>
  
  <pre><code>&lt;header id="header" class="header"&gt;
          &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
  &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="/#/dashboard" ng-if="location.path() != '/welcome'"&gt;&lt;h3&gt;RentedRoofs&lt;/h3&gt;&lt;/a&gt;
          &lt;a class="navbar-brand" href="#login" du-smooth-scroll ng-if="location.path() == '/welcome'"&gt;&lt;h3&gt;RentedRoofs&lt;/h3&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav" ng-show="location.path() != '/welcome'"&gt;
              &lt;li ng-class="{active: location.path() == '/dashboard'}"&gt;
                  &lt;a href="/#/dashboard"&gt;
                      &lt;span class="glyphicon glyphicon-home" aria-hidden="true"&gt;&lt;/span&gt; Home
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right" ng-show="location.path() == '/welcome'"&gt;
              &lt;li&gt;
                  &lt;a  href="#login" du-smooth-scroll&gt;Login&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#howItWorks" du-smooth-scroll&gt;Know How&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#contact" du-smooth-scroll&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right" ng-show="location.path() != '/welcome'"&gt;
              &lt;li ng-click="logout()"&gt;
                  &lt;a &gt; Logout &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
      </p>
  
  <p>Code of select box</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="row text-center"&gt;
              &lt;md-input-container ng-if="owner.allProperties.length &gt; 1" ng-class="{'big-centered': !owner.selectedProperty}"&gt;
                  &lt;md-select placeholder="Select Property To View Details" ng-model="owner.selectedProperty"&gt;
                      &lt;md-option ng-repeat="property in owner.allProperties" ng-value="property"&gt;
                          {{getAddressString(property.address)}}
                      &lt;/md-option&gt;
                  &lt;/md-select&gt;
              &lt;/md-input-container&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css class</p>
  
  <pre><code>.big-centered{
  font-size: 1.7em;
  margin-top: 20%;
  }
  </code></pre>
  
  <p>To make it more clear I have created the codepen demo<a href="http://codepen.io/anon/pen/xZYRbG" rel="nofollow">demo</a>
  To produce the problem. Select state. Then choose AZ. Then again click on select box Now you will see AL hidden.</p>