文本没有显示在div中

Question

从头开始制作幻灯片，我尝试在每张幻灯片的顶部添加文字，包含文字的div显示为空，但在页面上的任何其他位置都显示正常。

Here is the page I'm working on

我试图修复的元素是：

<div class="slide-title">test</div>

.slide-title{
  display: block !important;
  position: absolute;
  vertical-align: top;
  z-index: 999;
  top: 16px;
  left: 16px;
}

我在页面上放置了3次以测试它会显示在哪里。

Answer 1

从您的codepen，而不是此处发布的代码，您有font-size: 2em;。你有

#slideshow {
    font-size: 0; /*Gets rid of horizontal space between images*/
}

设置，这是您的子元素的默认字体大小，因此2em与0px相同。适当地更改其中一项措施（例如，将2em更改为20px），您将看到更改。