html - 在图像顶部显示一个 div

Question

我想在图像顶部显示一个带有背景颜色的 div，其中会有一些数据，圆形的东西表示类别，下面显示名称和日期 https://jsfiddle.net/shane07861234/88k78f7n/2/这是我的尝试，但无法正确倾斜它们。日期和名称将显示在类别下方。

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<!-- <div class="box-hover"></div> -->
    <div class="image-div-contents">
        <div class="top-div">
            <div class="box-text"><span>AG</span></div><br><br>
            <div class="doc-name"> LLL Bill</div><div class="doc-date">2/02/2017</div>
       </div>
       <a class="thumbnail" href="#">
          <div class="validitity"><span>Validitity: Forever</span></div>
          <img class="img-responsive" src="http://placehold.it/200x300" alt="">
          <!-- <div class="box-tresc"><div class="circle-category"><b>Category:<b></div></div> -->
      </a>                     
   </div>
</div>
<!-- </div> -->

/image/KM76h.png

Answer 1

这可能对您有所帮助。你的代码太乱了，帮不上什么忙。

合理的建议:不要使用 position: absolute 和 float 直到事情无法以更简单的方式完成。

.thumb {
  position: relative;
  margin-bottom: 30px;
  z-index: -1;
  border: 1px solid red;
}
.thumbnail .img {
  max-height: 100%;
  max-width: 100%;
  border: 0 none;
}
.thumbnail {
  border: 0 none;
  box-shadow: none;
}
.box-text {
  font-family: 'Aller Regular';
  z-index: 100;
  color: white;
  font-size: 20px;
  left: 60px;
  top: 20px;
  -moz-border-radius: 30px;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  background: #652c90;
  color: white;
  text-align: center;
}
.image-div-contents {
  display: inline-block;
  position: relative;
}
.box-text {
  z-index: 4;
  padding: 5px;
  text-align: center;
  background-color: #652c90;
}
.doc-name {
  white-space: nowrap;
  font-family: 'Aller Regular';
  z-index: 100;
  color: white;
  font-size: 15px;
  display: inline;
  left: 0px;
  text-align: right;
  width: 90px;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.doc-date {
  font-family: 'Aller Regular';
  z-index: 100;
  color: white;
  font-size: 15px;
  text-align: left;
  display: inline;
  padding: 0px 90px;
  overflow: hidden !important;
}
.validitity {
  opacity: 0.8;
  border-radius: 5px;
  font-family: 'Aller Regular';
  z-index: 100;
  color: white;
  font-size: 15px;
  background-color: #ee3f6a;
  padding-left: 35px;
  padding-right: 35px;
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
}
.top-div {
  z-index: 1;
  /* position:absolute;  */
  height: auto;
  width: 100%;
  background-color: #33FF99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <!-- <div class="box-hover"></div> -->
  <div class="image-div-contents">
    <div class="top-div">
      <div class="box-text"><span>AG</span>
      </div>
      <br>
      <br>
      <div class="doc-name">LLL Bill</div>
      <div class="doc-date">2/02/2017</div>
    </div>
    <a class="thumbnail" href="#">
      <div class="validitity"><span>Validitity: Forever</span>
      </div>
      <img class="img-responsive" src="http://placehold.it/400x300" alt="">
      <!-- <div class="box-tresc"><div class="circle-category"><b>Category:<b></div></div> -->
    </a>

  </div>
</div>
<!-- </div> -->