将带有背景颜色的div放在光滑的滑块上（http://kenwheeler.github.io/slick/）

Question

我使用光滑的滑块（http://kenwheeler.github.io/slick/）来显示电子商务应用程序的产品：

这是想要实现的目标：

这就是我得到的：

我的代码：

<div>
  <a href="#" >
   <img src="img/offers/1.jpg" class="u-max-full-width"  />
   <div class="one">
      <p>30%</p>
   </div>
  </a>
</div>

.one{
  color:black; 
  background-color:red !important;
  width:30%;
  text-align:center; 
  border-radius:10%;
  margin-top:-50px;
}

我在这里解决了这个问题（How to position text over an image in css）但是，在我的情况下，我将无法使用绝对位置作为内容。来自上述ans http://jsfiddle.net/utpalnu/EgLKV/5234/

的编辑小提琴链接

我的小提琴链接： http://jsfiddle.net/utpalnu/rdfg2fsk/

Answer 1

我相信你只需要将它添加到你的CSS中。

position:relative

http://jsfiddle.net/vkyuyvo7/

Answer 2

您必须将position:relative添加到包装元素，然后才能将position:absolute用于红色标签。

.wrapper { //add this class to <a> tag
 position:relative;
}
.one {
    color:black; 
    background-color: red;
    width:30%;
    text-align:center; 
    border-radius:10%;
    position:absolute; // now it will work.
    top: -30px; //changed from margin to "top" style, but margin will also work.
    left: 10px; // I've also added "left" for nice look :)

}

http://jsfiddle.net/rdfg2fsk/3/