定位固定css在角度材料中添加body标签

Question

我现在面临一些问题,position: fixed; width: 100%; top: 0px;对md-select md-autocomplete,如果我在某些固定的使用它们.对于几乎所有的md-select选项,我都面对角度材料这个问题.它将CSS属性动态地添加到body部分.

position: fixed; width: 100%; top: 0px; 并滚动.

的index.html

            <div class="col-md-7 col-sm-6 search-head hidden-xs">
    <md-autocomplete
      md-no-cache="ctrl.noCache"
      md-selected-item="ctrl.selectedItem"
      md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
      md-search-text="ctrl.searchText"
      md-selected-item-change="ctrl.selectedItemChange(item)"
      md-items="item in ctrl.querySearch(ctrl.searchText)"
      md-item-text="item.name"
      md-min-length="0"
      placeholder="Search....."
      md-menu-class="autocomplete-custom-template">
    <md-item-template>
      <span class="item-title">

        <span> {{item.name}} </span>
      </span>
      <span class="item-metadata">
        <span class="item-metastat pull-right">
          <strong>{{item.forks}}</strong>
        </span>
      </span>
    </md-item-template>
  </md-autocomplete>
    <md-input-container class="md-block" md-no-float flex-gt-sm>
    <md-icon md-svg-src="img/locationpin.svg"></md-icon>
       <!-- <label>Location</label> -->
       <md-select ng-model="user.state" placeholder="Location">
         <md-option ng-repeat="state in states" value="{{state.abbrev}}">
           {{state.abbrev}}
         </md-option>
       </md-select>
     </md-input-container>
                <button type="button" class="search-bt">GO</button>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-10 head-link">
        <p class="visible-xs mobile-menu-ic">

        <md-menu md-offset="0 -5" ng-controller="menuCtrl as ctrl">
          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
            <i class="material-icons">&#xE5D2;</i>
          </md-button>
          <md-menu-content width="4">
            <md-menu-item>
              <md-button ng-click="ctrl.announceClick($index)"> Profile </md-button>
            </md-menu-item>
              <md-menu-item>
              <md-button ng-click="ctrl.announceClick($index)"> Messages </md-button>
            </md-menu-item>
              <md-menu-item>
              <md-button ng-click="ctrl.announceClick($index)"> Sign Out </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
        </p>
        <ul id="popupContainer" class="clearfix pull-right hidden-xs">
             <li><md-button class="" ng-click="newpost($event)">
                  Post
                </md-button></li>

            <li class="mesg"><a href="#"><img src="img/mail.svg"> </a></li>
            <li><a href="/profile" class="profile" ng-click="showAdvanced($event)"><img src="img/macbook-wireless-mouse.jpg"> </a></li>

        </ul>
    </div>
          </div>
</header>

Answer 1

您在浏览器中检查过它吗？您可以看到 md 样式可能会覆盖它。向其中添加一个类并覆盖样式，如果需要则使用 important

.md-select.fixedTop{
    top: 0px !important;
}