我正在使用一个角度应用程序,并且在一个Twitter引导程序模版中使用即时消息。
我试图使用固定位置将模态主体中存在的按钮重新定位到模态页脚。该按钮会触发当前模态主体作用域特有的功能,无论滚动位置如何,我都需要使其保持可见状态。始终可以看到模态标题和模态页脚,并且模态主体溢出在这些元素下方滚动。
一切都可以在Chrome浏览器中正常运行。
我已经看到其他人在使用固定定位和Safari时遇到了多个问题,而我尝试使用这些变通办法,包括:
-webkit-transform:translateZ(1px);
我也看到了删除
transform: translate3d(0, 0, 0) ;
在某些情况下提供了帮助,但是默认情况下该规则已添加到引导模态对话框中,而对于我来说,删除它不是一个选择,因为删除时存在大量不适当的元素。
除了这些尝试之外,我还尝试将按钮放置在带有绝对位置的父元素和固定位置的父元素中,还尝试删除父元素并仅放置按钮本身,但这些都不适合我。
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>
非常感谢其他任何解决方法或建议-非常感谢!
不幸的是,我从来没有使用CSS来解决这个问题,相反,我不得不重新思考和重建受影响的每个模态的模态设计-删除所有固定位置的元素,复制标记中每个模态的内脏,而不是依靠为我做的有角
通过进一步的调查,我发现了有关z-index和堆栈上下文的新事实,这可能是根本问题的原因。
每个堆叠上下文都有一个HTML元素作为其根元素。在元素上形成新的堆叠上下文时,该堆叠上下文将其所有子元素限制在堆叠顺序中的特定位置。这意味着,如果元素位于堆叠顺序底部的堆叠上下文中,则无法使它出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面,即使使用Z指数达十亿!菲利普·沃尔顿Article
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句