Как вставить картинку в div верхний левый угол?

Question

[squirtazzer]

z-mesta.com/reka-nilo
Как внести эту z-mesta.com/wp-content/uploads/2017/08/Price.png картинку в div блоки(три пакета) https://hkar.ru/QrHc чтобы она была в левом верхнем углу как здесь
https://hkar.ru/QrHb
Я вношу и начинаю позиционировать ее но она на телефоне уползает на середину все равно.или становится по центру.

Answer 1

[Formula_1]

Попробуйте добавить position: relative для div#layer1 и других, а для картинки position: absolute; top: 0; left: 0;

Comments

[squirtazzer]

я нашел на главной что эта звездочка и желтый полукружочек вставляется с помощью шрифта awesome font)я звзедочку добавил с помощью

<span class="special"><span class="fa fa-star"></span></span>

но полукруг не могу найти...https://hkar.ru/QrHq
мне кажется с помощью шрифта будет изящнее,чем картинка

[Formula_1]

https://codepen.io/qwerqwer/pen/OjQBRq

[squirtazzer]

Formula_1: https://hkar.ru/QrHT
у меня почему то так получается

это же в код ?*


"ЭКОНОМ"5000 РУБ/СУТКИ

[squirtazzer]

Formula_1: а когда вношу стили картинка https://hkar.ru/QrHU уезжает вверх страницы

[Formula_1]

для div#layer1 добавили position: relative?

[squirtazzer]

Formula_1: да

[squirtazzer]

Formula_1: media (max-width: 991px) {
#layer1, #layer2, #layer3 {
width: 100%;
margin: 30px auto;
position: relative
} вот такой код у меня сейчас

[squirtazzer]

d Formula_1: в самой старнице



должно же быть так?


"ЭКОНОМ"

[Formula_1]

добавьте блок .special внутрь #layer1

[squirtazzer]

Formula_1:

<div id="layer2"><div class="special">
  <span class="fa fa-star"></span>
</span><p style="text-align: center;"><p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 22pt; color: #00ccff;">"СТАНДАРТ"</p><hr>\

так?

[Formula_1]

только не <div class="special">, а <span class="special">

[squirtazzer]

https://hkar.ru/QrIt так и сделал
https://hkar.ru/QrIw получается такая байда
position: relative установлен

media (max-width: 991px) {
#layer1, #layer2, #layer3 {
width: 100%;
margin: 30px auto;
position: relative;
}
}