如何解决固定位置在 safari 上被切断
我有一个固定位置的工具提示,适用于除 Safari 之外的所有浏览器。在 safari 中,工具提示被具有 overflow: scroll
关于如何解决这个问题有什么想法吗?
这是它应该是什么样子的屏幕截图:
这就是它在 safari 上的样子:
.announcement {
position: fixed;
width: 3.1rem;
height: 3.1rem;
background-image: url("./../assets/icons/announcement-alert-right.svg");
background-size: cover;
margin: 0 0 0 -2.8rem;
z-index: 1;
&:hover {
margin: -3.6rem 0 0 -14.8rem;
width: 15.3rem;
height: 6.7rem;
background-image: url("./../assets/icons/announcement-profile.svg");
}
@media screen and (max-width: $desktop) {
display: none;
}
}
这是家长的观点:
.profile {
position: fixed;
z-index: map-get($zindex,sidebar);
right: 0;
width: 15%;
height: 100%;
transition: 0.5s;
padding: 3rem;
Box-shadow: 0 1.5rem 3rem $color-shadow;
background-color: $color-white;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
我尝试了几种不同的修复方法,例如:
-webkit-transform: translateZ(0);
transform: translate3d(0,0);
-webkit-transform: translate3d(0,0);
z-index:9999 !important)
但它们都不起作用。
任何帮助将不胜感激! 谢谢!
解决方法
在不知道您的 html 代码的情况下,我推测父容器和工具提示元素不在同一级别,因此即使您增加 z-index 值也不会改变。 将元素放在可以工作的同一级别。像这样
<parent-container>
//parent content
</parent-container>
<tooltip-element>
//tooltip-content
</tooltip-element> //same level
,
检查父元素的属性和重叠元素的属性。其中一些有一个位置或 z 索引值阻止它从你想要的行为
,我敢打赌,您可能需要在 Safari 中将 position: fixed
和 overflow
标签拆分为两个嵌套的 div 类吗?我知道这可能有点烦人和不方便,但那样的话 - 我不认为 z-index
会被封锁...
HTML:
<div class="wrapper1">
<div class="wrapper2">
<div class="inner">
/* Stuff inside here */
</div>
</div>
</div>
CSS:
.wrapper {
...
position: fixed;
...
}
.wrapper2 {
...
overflow: hidden;
position: absolute;
...
}
我不会想到 overflow: scroll
会影响任何 z-index
属性,但我们会看到。祝你找到解决方案好运,希望我有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。