Material Angular 选项卡中的固定元素问题

Question

当我们添加一个带有 position: fixed 的元素到 Tab Content 时，它是根据 Tab Content 而不是 Body 定位元素，是否有任何修复？附上代码笔。

.fixed-element {
  position: fixed;
  top: 10px;
  left: 10px;
  background: #aaa;
}

Code Pen

Answer 1

你能看看这个吗codepen here 我把内容拿出来，然后我根据哪个选项卡用户 select 显示内容。（参见 ng-switch）。希望这对你有帮助。谢谢你。因为我也是新人。让我知道如果我做错了什么。

我的代码：HTML

<div class="tabsdemoDynamicHeight" ng-app="MyApp">
   <md-content class="md-padding">
    <md-tabs  md-dynamic-height="" md-border-bottom=""md-selected="tabs.selectedIndex">
      <md-tab id="tab1" aria-controls="Tab 1" label="one">
      </md-tab>
      <md-tab id="tab2" aria-controls="Tab 2" label="two">
      </md-tab>
      <md-tab id="tab3" aria-controls="Tab 3" label="three">
      </md-tab>
    </md-tabs>

  <md-content class="md-padding">
    <ng-switch on="tabs.selectedIndex">
      <div ng-switch-when="0">
      <!-- put the content of tab 1 here-->  
          <h1 class="md-display-2">Tab One</h1>
          <div class="fixed-element"> Fixed Element</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
      </div>
      <div ng-switch-when="1">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
          <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>

      </div>
      <div ng-switch-when="2">

          <h1 class="md-display-2">Tab Three</h1>
          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>

    </div>
      </ng-switch>
  </md-cotent>
     </md-content>
</div>

CSS:

.fixed-element {
  position: fixed;
  top: 10px;
  left: 10px;
  background: #aaa;
}

Answer 2

transform: translate下的

postion: fixed;暂时无法使用，请参考下面的link了解更多信息：https://code.google.com/p/chromium/issues/detail?id=20574

Material Angular 选项卡中的固定元素问题

Issue with Fixed Elements in Material Angular Tab

css

angular-material