Question

我正在创建内容div，但当前不可见，因为同级div覆盖了它。我该如何解决？

<!-- language: lang-css -->
/* parent */
#game {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
/* sibling */
#screen {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden
}
/* div currently not visible */
.tabcontent {
  padding: 5px;
  border: 1px solid #ccc;
  border-top: none;
  font-size: 20px;
  width: 320px;
  height: 515px;
  background: #191919;
  margin: 0 auto;
}

Answer 1

如果您想让<div>在另一个前面，则有两种解决方案

在您的HTML代码中，将.tabcontent div 放在#screen之后，这样它将显示在前面
您可以使用z-index CSS属性（也需要position）来确定绘制顺序（哪个div在哪个前面）

后者的示例：

#screen {
    position: relative; /* Needed by z-index but won't actually do anything */
    z-index: 0;
}

.tabcontent {
    position: relative;
    z-index: 1;
}

较大的z-index表示它将位于较低z-index的元素的前面。

Answer 2

做父母

#game {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

这应该把它放在前面

兄弟元素会影响div的可见度

2 个答案: