固定的位置不是在Safari 8.0.2版工作 [英] Position fixed not working in Safari Version 8.0.2

问题描述

我与Twitter的引导模式内的角应用和进出口工作。

I am working with an angular application and im inside a twitter bootstrap modal.

林试图重新位置中存在的模态，使用固定位置模态页脚的主体上的按钮。该按钮触发独特的电流模式体范围的功能，我需要它留在视图中，无论滚动位置的。模态头和模态英尺总是认为和这些元素在相应的模体溢出滚动。

Im attempting to re-position a button that exists in the body of the modal to the modal footer using fixed position. That button fires a function unique to the current modal-body scope and I need it to remain in view regardless of scroll position. The modal-header and modal-footer are always in view and the modal-body overflow scrolls accordingly under those elements.

的作品如预期在Chrome中的一切。的

我见过许多问题，有的都有了固定的定位和Safari和我试图使用这些变通办法包括：

Ive seen multiple problems others have had with fixed positioning and Safari and I have attempted to use those work-arounds including:

-webkit-transform:translateZ(1px); 

香港专业教育学院还看到，删除

Ive also seen that removing

transform: translate3d(0, 0, 0) ;

帮助在某些情况下，但规则默认添加到引导模式，对话框和删除时，它的拆除，是不是我的选择，因为出来的地方元素的一个长长的清单。

has helped in some situations but that rule is added to the bootstrap modal-dialog by default and removing that isn't an option for me because of a long list of out of place elements when it's removed.

在除了这些尝试我试图放置按钮父元素重量/绝对定位以及父瓦特内/固定定位，并试图除去父元素和刚放置按钮本身，其中没有工作为了我。

In addition to those attempts I have tried placing the button inside a parent element w/ absolute positioning as well as a parent w/ fixed positioning and also attempted to remove the parent element and just place the button itself, none of which worked for me.

在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>

任何其他解决方法或建议大大AP preciated - ！感谢你多少

Any other workarounds or suggestions greatly appreciated - thank you much!

推荐答案

不幸的是，我从来没有解决了这个问题，CSS，而不是我不得不重新思考和放大器;重建为每一个正在影响情态动词的模式设计 - 消除所有的固定定位元素，复制内脏在每一个标记模式，而不是依赖角度做了我 -

Unfortunately, I never solved this problem with CSS, instead I had to rethink & rebuild the modal design for each of the modals that were being affected - removing all the fixed positioned elements, duplicating the innards for every modal in the markup instead of relying on angular to do it for me-

和经进一步调查香港专业教育学院了解到的z-index＆放新的事实;该的堆叠内容可能的是根问题的原因

and upon further investigation ive learned new facts about z-index & the stacking context that could be the cause of the root issue

每个堆叠上下文都有一个HTML元素作为它的根元素。当一个元件上形成一个新的堆叠环境，即堆叠上下文地限制所有的子元素，以在堆叠顺序的特定位置。这意味着，如果一个元件被包含在位于堆叠顺序的底部堆叠内容，也没有办法得到它在另一个元件的前面出现在处于堆叠顺序高的不同的堆叠环境，即使有一个十亿的z-index的！ <一href=\"http://philipwalton.com/articles/what-no-one-told-you-about-z-index/%22Phillip%20Walton%20z-index%20article%22\"相对=nofollow>菲利普·沃尔顿文章

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion! Phillip Walton Article

这篇关于固定的位置不是在Safari 8.0.2版工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！