角材质菜单位置（通知栏）答案

【问题标题】：Angular material menu position (notification bar)角材质菜单位置（通知栏）
【发布时间】：2016-01-12 15:50:27
【问题描述】：

我正在尝试创建一个通知栏，当它被点击时，它会显示在铃铛图标的左下方。

可以在这里看到一个例子：http://wrapbootstrap.com/preview/WB011H985

我尝试给它一个特定的顶部边距（140 像素），但是当您向下滚动一点并单击铃铛时，通知也会显示在下方。

HTML

<div class="md-menu-demo menudemoMenuPositionModes" ng-controller="PositionDemoCtrl as ctrl" ng-cloak="" style="min-height:350px;" ng-app="MyApp">
  <div class="menu-demo-container" layout-align="start center" layout="column">
    <div class="menus" layout-wrap="" layout="row" layout-fill="" layout-align="space-between center" style="min-height:200px;">
      <div layout="column" flex-sm="100" flex="33" layout-align="center center">
        <p><code>md-position-mode="target-right target"</code></p>
        <md-menu md-position-mode="">
          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
            <img ng-src="https://cdn4.iconfinder.com/data/icons/unigrid-flat-basic/90/019_025_bell_ring_alarm_notice_notification_notify-32.png">
          </md-button>
          <md-menu-content width="6">
            <md-menu-item ng-repeat="item in [1, 2, 3]">
              <md-button ng-click="ctrl.announceClick($index)">
                  <div layout="row">
                    <p flex="">Option {{item}}</p>
                    <md-icon md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon>
                  </div>
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
    </div>
    </div>
  </div>

CSS

.menudemoMenuPositionModes .md-menu-demo {
  padding: 24px; }

.menudemoMenuPositionModes .menu-demo-container {
  min-height: 200px; }

#menu_container_0 {
  background-color:red;
  margin-top:140px;
}

JavaScript

angular
  .module('MyApp',['ngMaterial', 'ngMessages'])
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet("call", 'img/icons/sets/communication-icons.svg', 24)
      .iconSet("social", 'img/icons/sets/social-icons.svg', 24);
  })
  .controller('PositionDemoCtrl', function DemoCtrl($mdDialog) {
    var originatorEv;

    this.openMenu = function($mdOpenMenu, ev) {
      originatorEv = ev;
      $mdOpenMenu(ev);
    };

    this.announceClick = function(index) {
      $mdDialog.show(
        $mdDialog.alert()
          .title('You clicked!')
          .textContent('You clicked the menu item at index ' + index)
          .ok('Nice')
          .targetEvent(originatorEv)
      );
      originatorEv = null;
    };
  });

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

给菜单容器添加绝对定位...

在你的例子中，像这样：

#menu_container_0 {
  background-color:red;
  position: absolute;
  margin-top:140px;
}

http://codepen.io/anon/pen/VeWgvq

【讨论】：