Текст слайдера в верхней части изображения

Question

Я пытаюсь сделать довольно обычную карусель с двумя стрелками с обеих сторон в вертикальной середине и текст с кнопкой посередине над изображением. Я не могу заставить что-то появляться поверх изображения, хотя, хотя стрелки и текст являются абсолютными и имеют более высокий индекс z. Вот код с моим кодом. http://codepen.io/kathryncrawford/pen/AXmVAz

А вот мой HTML

<div class="slick-slider"> 
    <div> 
     <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
     <div class="info"> 
     <h1 class="slider-heading">Heading</h1> 
      <p class="slider-subheading lead">Subheading</p> 
      <a class="btn btn-large btn-danger" href="">button text</a> 
     <p class="down-arrow"> 
      <a class="btn btn-large btn-down-arrow" href="#theend"> 
       <i class="fa fa-chevron-down fa-lg" aria-hidden="true"></i> 
      </a> 
     </p> 
     </div> 
    </div> 
    <div> 
     <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
    </div> 
    <div> 
     <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
    </div> 
</div> 

Мой CSS (пятно CSS не входит здесь, но в codepen)

.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 > .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 > div { 
    display: inline-block !important; 
    vertical-align: middle; 
    } 

И мой JS

jQuery(function($){ 
    $('.slick-slider').slick({ 
    accessibility: true, 
    adaptiveHeight: true, 
    arrows: true, 
    infinite: true, 
    mobileFirst: true, 
    nextArrow: '<div class="chevron-container slick-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span><span class="sr-only">Next</span></div>', 
    prevArrow: '<div class="chevron-container"><i class="fa fa-chevron-left" aria-hidden="true"></i></span><span class="sr-only">Previous</span></div>', 
    slidesToShow: 1 
    }); 
}); 

Answer 1

Вы должны сделать

.slick-slide { 
    /* ... */ 
    position: relative; 
} 

, так что материал .info знает, что он должен быть абсолютно позиционирован для его родителя.

Answer 2

Просто добавьте position: relative в .slide-slide.

jQuery(function($){ 
 
    $('.slick-slider').slick({ 
 
    accessibility: true, 
 
    adaptiveHeight: true, 
 
    arrows: true, 
 
    infinite: true, 
 
    mobileFirst: true, 
 
    nextArrow: '<div class="chevron-container slick-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span><span class="sr-only">Next</span></div>', 
 
    prevArrow: '<div class="chevron-container"><i class="fa fa-chevron-left" aria-hidden="true"></i></span><span class="sr-only">Previous</span></div>', 
 
    slidesToShow: 1 
 
    }); 
 
});

.slick-slider 
 
{ 
 
    position: relative; 
 

 
    display: block; 
 
    box-sizing: border-box; 
 

 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 

 
    -webkit-touch-callout: none; 
 
    -khtml-user-select: none; 
 
    -ms-touch-action: pan-y; 
 
    touch-action: pan-y; 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 

 
.slick-list 
 
{ 
 
    position: relative; 
 

 
    display: block; 
 
    overflow: hidden; 
 

 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slick-list:focus 
 
{ 
 
    outline: none; 
 
} 
 
.slick-list.dragging 
 
{ 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 

 
.slick-slider .slick-track, 
 
.slick-slider .slick-list 
 
{ 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    -ms-transform: translate3d(0, 0, 0); 
 
    -o-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
} 
 

 
.slick-track 
 
{ 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 

 
    display: block; 
 
} 
 
.slick-track:before, 
 
.slick-track:after 
 
{ 
 
    display: table; 
 

 
    content: ''; 
 
} 
 
.slick-track:after 
 
{ 
 
    clear: both; 
 
} 
 
.slick-loading .slick-track 
 
{ 
 
    visibility: hidden; 
 
} 
 

 
.slick-slide 
 
{ 
 
    display: none; 
 
    float: left; 
 
    position: relative; 
 
    height: 100%; 
 
    min-height: 1px; 
 
} 
 
[dir='rtl'] .slick-slide 
 
{ 
 
    float: right; 
 
} 
 
.slick-slide img 
 
{ 
 
    display: block; 
 
} 
 
.slick-slide.slick-loading img 
 
{ 
 
    display: none; 
 
} 
 
.slick-slide.dragging img 
 
{ 
 
    pointer-events: none; 
 
} 
 
.slick-initialized .slick-slide 
 
{ 
 
    display: block; 
 
} 
 
.slick-loading .slick-slide 
 
{ 
 
    visibility: hidden; 
 
} 
 
.slick-vertical .slick-slide 
 
{ 
 
    display: block; 
 

 
    height: auto; 
 

 
    border: 1px solid transparent; 
 
} 
 
.slick-arrow.slick-hidden { 
 
    display: none; 
 
} 
 
.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 > .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 > div { 
 
    display: inline-block !important; 
 
    vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script> 
 
<div class="slick-slider"> 
 
    <div> 
 
    <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
 
    <div class="info"> 
 
     <h1 class="slider-heading">Heading</h1> 
 
     <p class="slider-subheading lead">Subheading</p> 
 
     <a class="btn btn-large btn-danger" href="">button text</a> 
 
     <p class="down-arrow"> 
 
     <a class="btn btn-large btn-down-arrow" href="#theend"> 
 
      <i class="fa fa-chevron-down fa-lg" aria-hidden="true"></i> 
 
     </a> 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
 
    </div> 
 
    <div> 
 
    <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
 
    </div> 
 
</div>