top, bottom, right, left values not working as flex container is set as justify-content: center-CodePudding

Im trying to make the 'rating-block' to be positioned at the bottom-right side of 'card'. But these values don't work as its container has justify-content centre so it will force it in the centre. Is there a better way to position it to the bottom right?

.card {
    width: 210px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: green;
    position: relative
}

.card-img {
    display: flex;
    width: 50%;
    
}

.rating-block {
    background-color: white;
    border-radius: 10px;
    position: absolute;
    padding: 0 10px;
    top: 100px;
}

.rating {
    margin: 0px
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>  
    <div >
        <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" >
        <div >
            <p >4.5</p>
        </div>

    </div>    
</body>
</html>

CodePudding user response：

Try adding top: 185px; and left: 115px; to the .rating-block class

.card {
    width: 210px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: green;
    position: relative
}

.card-img {
    display: flex;
    width: 50%;
    
}

.rating-block {
    background-color: white;
    border-radius: 10px;
    position: absolute;
    padding: 0 10px;
    top: 185px;
    left: 115px;
}

.rating {
    margin: 0px
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>  
    <div >
        <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" >
        <div >
            <p >4.5</p>
        </div>

    </div>    
</body>
</html>

CodePudding user response：

Just adding a suggestion for css variables here as if you change the size of your div, it will automatically position the pill. Also consider using ::before as this cuts out a bit of markup too.

.card {
  --card-width: 210px;
  --card-height: 250px;
  --image-scale: 0.5;
  width: var(--card-width);
  height: var(--card-height);
  display: flex;
  background-color: green;
  position: relative;
  align-items: center;
  justify-content: center;
}

.card-img {
  display: flex;
  width: calc(100% * var(--image-scale));
}

.card::before {
  content: attr(data-rating);
  background-color: white;
  border-radius: 10px;
  position: absolute;
  padding: 0 10px;
  transform: translate(calc(0.5 * var(--card-width) * var(--image-scale)), calc(0.5 * var(--card-height) * var(--image-scale)   1rem));
}

<div  data-rating="4.5">
  <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" >
</div>