在图像顶部显示一个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> --> 

https://i.stack.imgur.com/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> -->