根据CanIUse，在position:sticky元素中有一个已知的Safari和overflow:auto问题：
溢出设置为auto的父级将阻止位置：粘滞在Safari中工作
但是，这是我需要的确切用例。我有一个可滚动的div，它被细分为两列。右列应该是粘性的，永远不会移动，即使滚动整个div也是如此。我在右栏使用position:sticky的原因是我希望用户能够仍然使用右列上的光标滚动左列。这是我发现的唯一解决方案。
Firefox / Chrome的一个工作示例如下：http://cssdeck.com/labs/zfiuz4pc滚动时橙色区域保持固定，但在Safari中却没有。
上面的例子对我的问题有一些不必要的包装，但我想尽可能地复制我希望这个代码工作的环境。它的基本要点是我有这个：
<div class="modal-content">
<div class="left-content">
</div>
<div class="sticky-element">
</div>
</div>
而CSS：
.modal-content {
display: flex;
overflow: auto;
flex-flow: row nowrap;
}
.left-content {
flex: 0 0 300px;
}
.sticky-element {
position: sticky;
top: 0;
right: 0;
width: 200px;
}
同样，这适用于FF / Chrome，但不适用于Safari。是否有解决方法可以在所有浏览器中使用它？或者是否有一种不同的方法可以用来保持可滚动性，即使鼠标光标在粘性元素上也是如此？
只需添加position: -webkit-sticky;
我从别人那里得到了这个解决方案：
http://cssdeck.com/labs/bu0nx69w
基本上，而不是position:sticky，使用position:fixed为右侧面板。关键是你在父div中的will-change:transform（在上面的例子中，在.modal-content中）所以position:fixed相对于那个父，而不是视口变得固定。这是一个巧妙的小技巧
我现在无法对Safari进行真正的测试，但在创建粘性页脚时，这一直是我的另一种选择：
<!DOCTYPE html>
<html>
<head>
<title>sticky side div</title>
<style type="text/css">
.maindiv{
position: relative;
display: inline-block;
background-color: forestgreen;
width: calc(100vw - 150px);
height: 100%;
overflow: auto;
}
.sidediv{
position: fixed;
display: inline-block;
background-color: lightyellow;
float: right;
width: 100px;
height: 100%;
}
</style>
</head>
<body>
<div class="maindiv">
Lorem 45
</div>
<div class="sidediv">
Lorem 30
</div>
<div class="maindiv">
Lorem 100
</div>
<div class="maindiv">
Lorem 900
</div>
</body>
</html>
一旦你知道正确的内容的宽度添加一点px然后使用css calc function以确保其他div不会流入它
在Safari 7中也存在vh和vw的已知错误。您可以通过设置高度来修复它：继承父元素具有vh高度或vw宽度的#child元素
但我最好的建议是，如果你不打算跨浏览器支持将使用CSS Grids