Подсказать как стилизовать блок

Question

Есть такой блок как на первой картинке. Хочу добавить в правом верхнем углу картинку которая будет выходить за края блока. Как кнопочка с телефоном внизу. Подскажите начинающему как мне это реализовать?
Нужно чтобы было адаптивно. Чтобы текст обтекал картинку при уменьшении размера экрана. Абсолютное позиционирование не подойдет. Float тоже не подойдет. При float картинку нельзя будет сместить за края блока. Я так понимаю.

Answer 1

Для блока нужно задать position: relative;, а для иконки и картинки в верхнем правом углу position: absolute;, и соответствующим образом позиционировать по вертикали и горизонтали.

Пример:

.block {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid #000;
}

.image {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  bacrground-color: #008000;
}

.icon {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
}

<div class="block">
  <div class="image"></div>
  <div class="icon"></div>
</div>

БЛОГ НА HUSL

Подсказать как стилизовать блок

Ответы (1 шт):