Search code examples
htmlcssblockinlineabsolute

Text not showing up in div

Making a slideshow from scratch, I'm trying to add text on top of each slide, the div that contains the text shows up empty but shows up fine anywhere else on the page.

Here is the page I'm working on

The element I'm trying to fix is:

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

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

I placed it 3 times on the page to test where it would show up.

Solution

  • From your codepen, not the code posted here, you have font-size: 2em;. Since you have 

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

    set, this is the default font size for your child element, and so 2em is the same as 0px. Change one of these measures appropriately (ex. change 2em to 20px) and you will see the change.