固定定位元件不按预期行事

Question

固定位置是指即使文档向下或向上滚动，也要将元素保持在某个位置。但是，我无法在website上使用此行为。

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

本文的css是：

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

Answer 1

如果可以的话，将装载div放在“skel-panels-pageWrapper”的上方，而不是它的工作原理。
问题似乎就是这里的

-webkit-backface-visibility: hidden;

当你排除这一行时，它也有效。

Answer 2

我在这里看到两种方法：

1. 从position: relative;移除#skel-panels-pageWrapper，以及chris建议的-webkit-backface-visibility: hidden;。

2. 或将#loading div移到#skel-panels-pageWrapper之外并将其直接放在body中，最好放在最后，以免造成任何问题与其他relative/absolute元素可能会被同一#loading属性与z-index发生碰撞。

第二个我觉得更合理。