Question

我正在使用一个角度应用程序，我在一个twitter bootstrap模式中。

我尝试使用固定位置将模态主体中存在的按钮重新定位到模态页脚。该按钮触发当前模态体范围独有的函数，无论滚动位置如何，我都需要它保持在视图中。模态标题和模态页脚始终处于视图中，模态体溢出在这些元素下相应滚动。

Chrome中的一切正常运作。

我看到其他人在固定定位和Safari方面遇到了多个问题，我试图使用这些解决方案，包括：

-webkit-transform:translateZ(1px);

我也看到了删除

transform: translate3d(0, 0, 0) ;

在某些情况下有所帮助，但默认情况下该规则被添加到bootstrap模式对话框中，并且删除对我来说不是一个选项，因为当它被移除时会有一长串不合适的元素。

除了那些尝试之外，我尝试将按钮置于父元素w /绝对定位以及父元素w /固定定位，并尝试删除父元素并只放置按钮本身，其中没有一个工作为了我。

CSS：

.stickyBut{
   position: fixed;
   bottom: 16px;
   left: 605px;
   z-index: 999999;

   /* -webkit-transform:translateZ(10px); failed */ 
} 
.but-hold{
   z-index: 999999; 
   width: 100%;
   height: 25px;
   position: absolute; 
   /* position: fixed; */
   top: 0;
   left: 0;

  /* FAILED
  -webkit-transform:translateZ(1);
  */
}

HTML：

<div class="but-hold">
    <button class="btn btn-warning stickyBut" ng-click="submitProfile()">Save + Continue</button>
</div>

非常感谢任何其他变通方法或建议 - 非常感谢！

Answer 1

不幸的是，我从来没有用CSS解决这个问题，而是我不得不重新思考＆amp;为每个受影响的模态重建模态设计 - 删除所有固定定位元素，复制标记中每个模态的内部而不是依赖于角度来为我做 -

经过进一步调查，我学到了关于z-index＆amp; amp;的新事实。可能导致根本问题的堆叠上下文

每个堆叠上下文都有一个HTML元素作为其根元素。在元素上形成新的堆叠上下文时，该堆叠上下文将其所有子元素限制为堆叠顺序中的特定位置。这意味着如果元素包含在堆叠顺序底部的堆叠上下文中，则无法使其出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面，即使是十亿的z指数！ Phillip Walton Article

Answer 2

我遇到过类似的问题。将position:fixed应用于父级具有transform样式的子级将不会按预期运行。这是webkit中的一个错误。

要解决此问题，请删除父级中的transform或将元素移出具有transform样式的父级。

这可能是引导模态的一种情况。

已修复的位置在Safari 8.0.2版中无效

2 个答案: