Позиционирующий элемент сверху гибкого элемента

Question

Мне нужна помощь в позиционировании элементов поверх гибкого элемента. У меня есть 3 изображения в одном ряду. В левом нижнем углу каждого изображения я хочу добавить 2 элемента, зеленый квадрат и рядом с ним название бренда. Название бренда должно иметь верхнюю границу ширины изображения. На втором изображении я хотел бы добавить третий элемент в верхнем правом углу. Я сделал простым jsfiddle , чтобы продемонстрировать, где я застрял. Это - это то, что мне нужно сделать.

<div class="flex-container">
  <ul>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg">
      <span class="item-price group">&#36;145.99</span>
      <span class="item-brand-name group">Even</span>
    </li>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg" >
      <span class="item-price group">&#36;145.99</span>
      <span class="item-brand-name group">Even</span>
      <span class="on-sale">on sale</span>
    </li>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg">
      <span class="item-price group">&#36;145.99</span>
      <span class="item-brand-name group">Buffalo</span>
    </li>
  </ul>
</div>

CSS

.flex-container {
  display: flex;
}

img {
  width: 300px;
  height: 270px;
}

.flex-container ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-container li {
  display: flex;
  position: relative;
  justify-content: space-between;
}

.flex-container .group {
  position: absolute;
  justify-content: center;
  align-items: center;
  transform: translate(20px, 200px)
}

.flex-container .item-price {
  font-size: 0.8rem;
  color: white;
  background: rgb(87, 197, 160);
  height: 67px;
  width: 67px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: inline-flex;
}

.flex-container .item-brand-name {
  font-size: 0.8rem;
  color: white;
  width: 250px;
  border-top: 1px solid grey;
  justify-content: center;
}

.flex-container .on-sale {
  font-size: 0.8rem;
  color: white;
  background: black;
  height: 67px;
  width: 67px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: inline-flex;
}

Answer 1

Как насчет этого?

Я предпочитаю всегда ставить гибкое правило для родителя или составлять таблицу с элементами div. Я надеюсь, что помог тебе.

.flex-container {
  display:flex;

}
img{
  width:300px;
  height:270px;
}
.flex-container ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-container li{
display:flex;
position:relative;
justify-content: center;
align-items: flex-end;
float:left; 
width:300px;
height:270px;background:url("https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg");
background-size:100%;
background-repeat:no-repeat;
}

 
 .flex-container .item-price{
	font-size: 0.8rem;
  color: white;
  background: rgb(87, 197, 160);
  height: 67px;
  width: 67px;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  
}
   
 .flex-container .item-brand-name{
	font-size: 0.8rem;
  color: white;
  width:250px;
  background:red;
  float:left;
  height: 66px;
  display:flex;
  justify-content: flex-start;
  align-items: center;
  border-top:1px solid grey;

 
}
	
.flex-container .on-sale{
	font-size: 0.8rem;
  color: white;
  background: black;
  height: 67px;
  width: 67px;
  position:absolute;
  display:flex;
  justify-content: center;
  align-items: center;
  right:0;
  top:0;
}

<div class="flex-container">
			<ul>
				<li>
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Even</span>
				</li>
				<li>
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Even</span>
          <span class="on-sale">on sale</span>
				</li>
				<li>
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Buffalo</span>
				</li>
			</ul>
</div>

Answer 2

Вам не нужно везде использовать flexbox. Я удалил несколько строк кода и разместил в продаже ярлык relative. Надеюсь, это поможет.

.flex-container {
  display:flex;
}
img{
  width:300px;
  height:270px;
}
.flex-container ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-container li{
		display:flex;
		position:relative;
    justify-content: space-between;
}

.flex-container .group {
		position:absolute;
		justify-content: center;
  	align-items: center;
    transform:translate(20px, 200px)
    }
 
 .flex-container .item-price{
	font-size: 0.8rem;
  color: white;
  background: rgb(87, 197, 160);
  height: 67px;
  width: 67px;
  /*justify-content: center;
  align-items: center;*/
  text-align: center;
  line-height:67px;
  /*display: inline-flex;*/
}
   
 .flex-container .item-brand-name{
	font-size: 0.8rem;
  color: white;
  width:250px;
  border-top:1px solid grey;
  justify-content: center;
 
}
	
.flex-container .on-sale{
	font-size: 0.8rem;
  color: white;
  background: black;
  height: 67px;
  width: 67px;
  /*justify-content: center;
  align-items: center;*/
  text-align: center;
  /*display: inline-flex;*/
  line-height:67px;
  position:relative;
  right:90px;
  
}

<div class="flex-container">
			<ul>
				<li>
					<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg">
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Even</span>
				</li>
				<li>
				<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg" >
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Even</span>
          <span class="on-sale">on sale</span>
				</li>
				<li>
					<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg">
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Buffalo</span>
				</li>
			</ul>
      </div>

Answer 3

Просто установите для элементов <li> значение relative и для класса .on-sale значение absolute. Затем вы можете расположить класс .on-sale в любом месте относительно элемента <li>.

Обновлена ​​скрипка; https://jsfiddle.net/szd5fcvu/