Question

我在页面中间某处有一个容器div的以下标记：

<div class="content">
   <div id="googleMap">...</div>
   <div id="someTable">...</div>
   <div id="doesntMatter>some other stuff</div>
</div>

我想使用一个伪类提供一个＆＃34;正在加载......＆＃34;覆盖<div class="content">。然后，一旦加载数据，删除叠加层以显示所有内部div。

我在为伪类编码css时遇到了麻烦，因此它覆盖了整个div。如果我将位置设置为绝对位置，则需要整个屏幕。使用position = relative，它占用的屏幕数量最少。

.content:before {
  content: 'Loading...';
  text-align: center; 
  position: absolute;
}

示例是here。我是以错误的方式来做这件事的吗？叠加甚至可以用伪类来实现吗？

Answer 1

您需要将position: relative添加到您的父类。绝对定位的元素指的是当它试图定位自己时具有position: relative的最接近的父元素，除非您在父元素上指定它，否则它可以被认为是正文标记。

Answer 2

位置绝对定义：元素相对于其第一个定位（非静态）祖先元素定位。

所以你需要div.content定位相对。

.content {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    position: relative;
}

.content::before {
    content:'';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.3)
}

<div class="content">
    Lorem ipsum
</div>

如何在伪类之前使用::为其元素创建加载屏幕？

2 个答案: