在圖像頂部顯示一個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> -->