1

这是一个奇怪的错误，我的 div 具有固定的定位和顶部属性为 x 像素，认为当 chrome/safari 在滚动时自动扩展视口时，视口的顶部没有改变。

更奇怪的是，当 chrome/safari 在滚动时自动展开时，其他固定在视口顶部/底部边缘的固定定位元素会自然移动并保持固定在视口边缘。

我的 CSS 是否因为某种原因而受到指责？

在 youtube 上查看显示该错误的视频。https://youtu.be/AMJKq3vfFkQ

如果您想调试 CSS，该网站位于 babbly.com。我在这里粘贴了一个简化的 CSS。

.div-which-is-supposed-to-stick-to-yellow-bar {
    height: 59px;
    top: 50px;
    padding: 5px 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px solid #e3e3e3;
    transition: left .4s;
    width: 100%;
    background: #fff;
    position: fixed;
    display: block;
}

.parent-of-above-div {
    position: relative;
    height: 59px;
    width: 100px;
}

.parent-of-parent-div {
    position: fixed;
    width: 100%;
    height: 45px;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 3;
}

红框就是那个人。在此处输入图像描述

4

1 回答 1

0

我解决了这个问题。具有.parent-of-parent-div固定定位bottomas 0。当视口在滚动时扩展/压缩时，这会导致.div-which-is-supposed-to-stick-to-yellow-bar底部栏一起移动。滚动停止后，浏览器会重新分析 CSS 并应用于top导致.div-which-is-supposed-to-stick-to-yellow-bar视频中看到的视觉故障。

我所做的是将其.div-which-is-supposed-to-stick-to-yellow-bar移出.parent-of-parent-div并放在另一个相对定位的父级下。通过阻止我的问题，这阻止了在.div-which-is-supposed-to-stick-to-yellow-bar那里跳舞。

于 2015-09-08T15:20:46.630 回答