zeigt ein Div auf Bild oben

Question

Ich möchte ein div auf Bild oben mit etwas Hintergrundfarbe anzeigen, und es wird einige Daten darin sein es kreisförmige Dinge zeigt Kategorie und darunter zeigt Namen und es ist Datum https://jsfiddle.net/shane07861234/88k78f7n/2/ hier ist mein Versuch, aber kann ' Sie können sie richtig neigen. Datum und Name werden unterhalb der Kategorie angezeigt.

<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

Dies könnte Ihnen helfen. Dein Code war so durcheinander, dass er nicht mehr helfen konnte.

fairer Vorschlag: Verwenden Sie nicht position: absolute und float, bis die Dinge nicht einfacher gemacht werden können.

.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> -->