相关疑难解决方法(0)

实际上我找到了导致问题的原因.我的问题是为什么要加入transform你的html, body休息时间position: fixed？

原来的问题

对我来说,最简单的CSS任务似乎失败了:position: fixed不保持元素相对于视点的位置.考虑以下样式表:

.stay-there-dammit {
  position: fixed;
  right: 0px;
  left: 0px;
  z-index: 1030;
}

页面首次加载时,定位正确.但是对视口的任何更改(例如滚动或调整大小)都不会影响.stay-there-dammit元素的定位.所以说它不会使其位置适应新的视口.

奇怪的是这个网站显示了position: fixed应该如何工作,实际上在我的浏览器中工作没有任何问题!

所以问题是:是否有任何可能破坏固定定位的东西？

顺便说一句.我使用Bootstrap 3.

更新:

似乎是由某些第三方应用程序设置的转换html,body打破了position: fixed.这是我必须删除的内容:

html, body {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3, mirror=1);
  -webkit-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
       -o-transform: scale(1, 1);
          transform: scale(1, 1);
}

似乎以下问题解决了同样的问题:

使用-webkit-transform时,固定的位置不起作用

但为什么？

我使用原始angular2材质框架中的md-fab-button.我想设置md-fab-button(用于添加新实体),position: fixed但我想将按钮放在内部组件中md-sidenav-layout但如果我这样做则position: fixed不起作用.

上面的代码:

<div class="{{themeService.ActualTheme}}">
    <md-sidenav-layout class="full-height" fullscreen>

这个类属性仅用于主题应用程序我也尝试过它没有全屏,并设置类"全高" md-sidenav-layout到100%高度和绝对,但它不起作用.

首先尝试(position: fixed不起作用):

        <button (click)="onPlusClickAction()" class="add-group-button" color="accent" md-fab>
            <md-icon class="md-24 plus-icon">add</md-icon>
        </button>

    </md-sidenav-layout>
</div>

而不是router-outlet内部组件将被替换(标准angular2路由).

现在我试着把md-fab-button放在这里:

        <router-outlet></router-outlet>

    </md-sidenav-layout>

    <button (click)="onPlusClickAction()" class="add-group-button" color="accent" md-fab>
        <md-icon class="md-24 plus-icon">add</md-icon>
    </button>
</div>

如果我这样做,那么position: fixed工程,但现在md-fab-button md-sidenav-layout在我之外,并且当我打开我的sidenav时,fab-button放在sidenav上.z-index不起作用,因为fab-button完全消失.

谁有好主意解决这个问题？

先感谢您!