css - 固定定位元素未按预期运行

Question

固定位置是指即使文档向下或向上滚动，也可以将元素保持在某个位置。但是，我无法让这种行为在我的 website 上起作用。 .

我正在开发一个加载元素，以向用户显示页面上的视频尚未加载。但是，我无法让文本“正在加载...”停留在该位置。这不是我第一次在此页面上遇到固定定位问题。我也尝试将菜单上的绝对定位更改为固定，但它不起作用。

此文本的 CSS 为:

#loading {
    font-size: 2em;
    top: 100px;
    left: 50%;
    margin-left: -60px;
    position: fixed;
    color: white;
    z-index: 2;
}

Answer 1

我在这里看到的两种方法:

1. 要么从#skel-panels-pageWrapper以及-webkit中删除position:relative; -backface-visibility: 隐藏; 由 chris 建议.

2. 或者将#loading div移到#skel-panels-pageWrapper之外，并将其直接放入 body，最好是在最后，以避免其他relative/absolute元素出现任何问题，这些元素可能会通过相同的z-与#loading发生冲突索引属性。

我认为第二个更合理。