Охват полуширины над слайдом с использованием пятна

Question

У меня есть простой слайдер, состоящий из изображений и слайдов с текстом. Я пытаюсь установить фоновый цвет наложения на слайдах, но у меня возникают проблемы с позиционированием и установкой точной ширины наложения в процентах.

Вот codepen того, что я работаю с: http://codepen.io/anon/pen/RrewXV

.slide-text-half { 
    background:rgba(130,20,20,0.8); 
    color:#fff; 
    padding:0px; 
    height:100%; 
    width:inherit; 
    z-index:2; 
    position:absolute; 
    top:0; 
} 

Установка ширины на 50% по классу слайд-текста половина посылает фон в бешенство, и я не могу понять, почему , Какие-либо предложения?

Answer 1

Элементов с position: absolute имеют размеры в соответствии с его первым родителем, которые имеют position отличаются static.

Так что если вы хотите, чтобы размер в DIV пропорционально слайда, вы должны добавить position: relative на слайдах, и убедитесь, что они имеют высоту ползунка с:

.slick-track { 
    height: 100%; 
} 
.slick-slide { 
    position: relative; 
} 

Вот ручка : http://codepen.io/tzi/pen/eJPmbZ

Answer 2

Вам нужно добавить

.slick-initialized .slick-slide { 
    position: relative; 
}