-1

enter image description here

How to have an image in angular 2 like the one above, taken from facebook marketplace. The one I need is the black on, bottom-left.

Kshitij Sinha
  • 59
  • 8
  • 1
    Possible duplicate of [Position absolute but relative to parent](https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent) – wha7ever Jul 23 '18 at 20:56

1 Answers1

0

Create a wrapper div around the image that has a position set to relative, and then create the overlay as a child div, with position set to absolute.

That will position it relative to the container

Here is an example:

.img-container {
  position: relative;
}

img {
    width: 500px;
}

.overlay {
    display: inline-block;
    color: white;
    background-color: rgba(0,0,0,0.8);
    padding: 10px;
    border-radius: 10%;
    position: absolute;
    bottom: 20px;
    left: 20px;
}
<div class="img-container">
  <img src="http://greenwoodhypno.co.uk/wp-content/uploads/2014/09/test-image.png" />

  <div class="overlay">
     $75
  </div>
</div>
user184994
  • 16,798
  • 1
  • 38
  • 48
  • There is already an array of answers (over 9000) about [positioning div inside another div](https://stackoverflow.com/search?q=position+div+inside+div). Should have marked as duplicate. – wha7ever Jul 23 '18 at 20:58