html - Positioning a box below an image background -
    i got image , box working accordingly far. problem is, when go add height , goes instead of down.   my fiddle - https://jsfiddle.net/kg6plk4e/       .post {      height: 255px;      font-size: 14px;      position: relative;      padding: 5px;      margin-right: 3%;      margin-top: 3%;  }  .box-one {      background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");      background-repeat: no-repeat;      background-size: cover;  }  .image-text {      position: absolute;      width: 100%;      margin: 0;      left: 0;      font-weight: bold;      color: white;      text-align: center;      background: black;      bottom: 0;      padding: 5px;      height: 40px;  }   <div class="late-post grid-60 tablet-grid-50 mobile-grid-100">      <div class="post box-one">                                                            <h1>pottery</h1>          <p class="image-text">lorem ipsum dummy text of print...