css上的加载图层不显示

在前端开发中，我们经常会遇到使用加载图层来增强用户体验的情况。然而，有时候我们发现加载图层并没有出现，造成了一些困惑。下面我们来探讨一下这种情况出现的原因以及解决方法。

.loading {
  position: fixed;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 999;
}

.loading img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

首先，我们需要确定加载图层的CSS是否正确。在代码中，我们通常会给加载图层一个高z-index，以确保它在所有其他元素之上。除此之外，还要设置图层的宽度和高度为100%，并使用fixed定位，保证它可以固定在页面上。在这个例子中，我们还使用一个半透明黑色背景加上了一个旋转的图片来增加动态效果。

如果我们的CSS没问题，那我们接下来就需要检查一下我们的图层是否被正确地插入到DOM中。如果图层的HTML代码出现在其他元素之后，那么它就可能会被其他元素遮挡，这也是图层不显示的常见情况。所以，我们需要确保该图层的代码位于其他元素的前面。

最后，我们还需要检查一下加载图层的显示时机是否正确。如果我们在加载图层之前就已经加载了所有的内容，那么加载图层就没有必要出现了。因此，在加载图层之前我们需要确保有一些需要加载的内容，比如图片或者ajax请求。

总而言之，当我们遇到加载图层不显示的情况，我们需要逐步检查CSS、HTML代码和显示时机等方面，找出问题所在并进行解决。