位置固定的CSS在角度材料中添加body标签

Question

如果我在某些固定的情况下使用 md-select CC_2，我正面临position: fixed; width: 100%; top: 0px;的某些问题。我几乎所有md-select选项都面临着Angular材料的问题。它将CSS属性添加到身体部分。

position: fixed; width: 100%; top: 0px;和scrolly。

index.html

<header class="container-fluid" id='headerControl' ng-cloak ng-controller = 'headerControl as ctrl'>
  <div layout="row">
    <div class="col-md-2 col-sm-2 logo">
      <a href="/">
        <img src="img/scooby.svg" alt="Logo" width="120px" class="img-responsive"></a>
    </div>
    <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样式可能会覆盖它。在其上添加一堂课和覆盖样式，如果需要的话，很重要

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

Answer 2

我想您检查了一下 .md-select.fixedTop{ top: 0px !important; }