2

Есть div блок. Это карточка товара. Хочу сверху наложить картинку (скидка). Как правильнее все это сделать? Какие css свойства должны быть у картинки а какие у div Блока

2 ответа 2

5

Сделайте блок с карточкой товара position:relative; в него поместите Вашу скидку и сделайте её position:absolute;. Дальше - Можете внутри карточки товара перемещать скидку как захотите с помощью свойств left, right, top, bottom. Только иногда бывает необходимо подобрать z-index так, чтобы искомый элемент оказался наложенным, а не подложенным

1
  • супер, спасибо за разъяснение
    – duddeniska
    13 ноя 2015 в 16:13
0

Например через position: absolute;. 1 вариант через псевдоэлемент, 2 вариант через добавление дочернего span:

/* 1 вариант начало */
.product {
  position: relative; // что абсолютные дочерние блоки распологались относительно этого блока
  display: inline-block;
  width: 100px;
  height: 100px;
  background: gray; // для теста
}

.product.sale:after {
  content: "-20%";
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  background: red; // сюда свою картинку прописываете
  padding: 10px;
  border-radius: 10px;
  z-index: 10; // поднять значение, если перекрывается другими элементами, но не слишком высокое, что бы например не торчало поверх попапов
}
/* 1 вариант конец */

/* 2 вариант начало */
.product-2 {
  position: relative; // что абсолютные дочерние блоки распологались относительно этого блока
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightgray; // для теста
}
.sale-2 {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  background: red; // сюда свою картинку прописываете
  padding: 10px;
  border-radius: 10px;
  z-index: 10; // поднять значение, если перекрывается другими элементами, но не слишком высокое, что бы например не торчало поверх попапов
}
/* 2 вариант конец */
<div class="product sale">
    
</div>
<div class="product-2">
    <span class="sale-2">
        <!-- или сюда свою картинку прописываете через <img /> -->
        -30%
    </span>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.