Half-width overlay over slide using slick

问题

I have a simple slider consisting of images and text-only slides. I'm trying to set a background colour overlay on the slides, but I'm having trouble positioning and setting an exact width of the overlay in percentage.

Here's a codepen of what I'm working with: 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;
}

Setting a 50% width on the slide-text-half class sends the background into a frenzy and I can't figure out why. Any suggestions?

回答1:

Elements with position: absolute are sized according to its first parent that have a position different than static.

So if you want to size the div proportionally of the slide, you have to add a position: relative on the slides, and make sure they have the height of the slider with:

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

Here is a pen: http://codepen.io/tzi/pen/eJPmbZ

回答2:

You need to add

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

来源：https://stackoverflow.com/questions/35220446/half-width-overlay-over-slide-using-slick