title: Slick slider text on top of images
body: <p>I'm trying to make a pretty normal carousel, with two arrows on either side in the vertical middle, and text with a button in the middle on top of the image. I cannot get anything to appear on top of the image though, even though the arrows and text are all absolute and have a higher z-index. Here's a codepen with my code. <a href="http://codepen.io/kathryncrawford/pen/AXmVAz" rel="nofollow">http://codepen.io/kathryncrawford/pen/AXmVAz</a></p>
  
  <p>And here's my HTML</p>
  
  <pre><code>&lt;div class="slick-slider"&gt;
      &lt;div&gt;
          &lt;img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""&gt;
          &lt;div class="info"&gt;
          &lt;h1 class="slider-heading"&gt;Heading&lt;/h1&gt;
              &lt;p class="slider-subheading lead"&gt;Subheading&lt;/p&gt;
              &lt;a class="btn btn-large btn-danger" href=""&gt;button text&lt;/a&gt;
          &lt;p class="down-arrow"&gt;
              &lt;a class="btn btn-large btn-down-arrow" href="#theend"&gt;
                  &lt;i class="fa fa-chevron-down fa-lg" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/a&gt;
          &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS (the slick css is not included here, but it is in the codepen)</p>
  
  <pre><code>  .slick-slider img { /* keep images full screen */
      width: 100%;
    }
  
    .chevron-container { /* full slider height container for chevrons */
      height: 100%;
      position: absolute;
      width: 100px;
    }
  
    .slick-right { /* keeps right arrow to the right */
      right: 0;
      top: 0;
    }
  
    .chevron-container &gt; .fa { /* positions chevrons in vertical center */
      bottom: 0;
      color: white;
      font-size: 10em;
      height: 1em;
      margin: auto;
      position: absolute;
      top: 0;
      width: 5em;
      z-index: 10;
    }
  
    .slick-slider .info {
      color: white;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      line-height: 100vh;
      text-align: center;
      z-index: 10;
    }
  
    .slick-slider .info &gt; div {
      display: inline-block !important;
      vertical-align: middle;
    }
  </code></pre>
  
  <p>And my JS</p>
  
  <pre><code>jQuery(function($){
    $('.slick-slider').slick({
      accessibility: true,
      adaptiveHeight: true,
      arrows: true,
      infinite: true,
      mobileFirst: true,
      nextArrow: '&lt;div class="chevron-container slick-right"&gt;&lt;i class="fa fa-chevron-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;Next&lt;/span&gt;&lt;/div&gt;',
      prevArrow: '&lt;div class="chevron-container"&gt;&lt;i class="fa fa-chevron-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;Previous&lt;/span&gt;&lt;/div&gt;',
      slidesToShow: 1
    });
  });
  </code></pre>