我在 position: fixed; 方面遇到了一些问题。宽度:100%； top: 0px; for md-select md-autocomplete 如果我在一些固定的地方使用它们。对于几乎所有的 md-select 选项，我都面临这个 Angular Material 问题。 它将 CSS 属性动态添加到正文部分。

位置:固定；宽度: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>

最佳答案

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

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

关于html - 位置固定的 css 添加到 Angular Material 中的 body 标签中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41276952/