html - 文本未显示在 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)，您将看到更改。