Здравствуйте! Возникло очень много вопросов в задании, хотя и выполнила его на 100%.
1)Зачем нам позиционирование? .ace-heart::before { background: url("/assets/course57/heart.svg") no-repeat 50% 100%; background-size: 25px; content:"A"; float: left; font-size: 25px; font-weight: bold; color:red; padding-bottom:20px; margin-left: 5px; margin-top:5px; }
дает такой же результат как и:
.ace-heart::before { background: url("/assets/course57/heart.svg") no-repeat 50% 100%; background-size: 25px; content:"A"; position: absolute; float: left; font-size: 25px; font-weight: bold; color:red; top: 5px; left: 5px; padding-bottom:20px; }
так зачем нам вводить позиционирование?чтобы итоговая картинка не страдала в резиновой верстке? или есть еще какое-то объяснение?
2.Почему обрезается сердечко и почему при перемещении его на 50% и 100% оно уходит на А?
а при нижнем паддинге еще и опускается вниз? от чего отсчитываются 50 и 100 процентов?
.ace-heart { background: url("/assets/course57/heart.svg") no-repeat 50% 50%; background-size: 50px; } .ace-heart::before { background: url("/assets/course57/heart.svg") no-repeat 50% 100%; background-size: 25px; content:"A"; position: absolute; float: left; font-size: 25px; font-weight: bold; color:red; top: 5px; left: 5px; padding-bottom:20px; }
Как видно .ace-heart я position: relative не задавала, но если задать, то результат тот же самый.
Ну насчет позиционирования тут вроде как по логике это псевдо элемент для декоративного эффекта, псевдоэлемент создает перед основным контейнером еще один, а значит его нужно с позиционировать абсолютно чтобы выдернуть из потока и установить на нужное место, а насчет паддинга это нормально, позиция картинки 50 100, задали паддинг нижний, соответственно контейнер по высоте увеличился а значит и позиция сдвигается, а еще лучше в этом испытании наведите мышку на окошко с мини браузером и зайдите в инструмент разработчика, покопайтесь в контейнерах и коде, и многое вам станет понятно:)
Без позиционирования вы можете обойтись только для ::before. Вот попробуйте сделать то же самое с ::after - уже не будет так красиво. А еще без заданного position: absolute; не работает поворот на 180deg. Придется дописывать display: block; В результате теряется однообразие написания кода. Абсолютное позиционирование чаще всего работает в связке с относительным, так координаты не изменяются при перемещении элемента.
По поводу background-position, первая координата означает отступ от левого края элемента, а вторая - от верхнего края.
то есть background-position: 50% 100% нам говорит о том, что по горизонтали элемент отступит на четверть размера родительского элемента с обеих сторон, а по вертикали вообще отступа не будет?
@Ineska, и еще раз для самых умных:slight_smile:
то есть если у элемента ширина 20, а высота 40, и позиционирование 100%, то отступ слева и справа будет 10, а сверху и снизу 20?
Вообщем чтоб разместить элемент например по центру контейнера, нужно задать по х-50% и по у-50%, следовательно по у-100% это нижний край контейнера. Вы его прижимаете туда. А вообще вот http://htmlbook.ru/css/background-position
@Ineska, @Aleksey_Fers спасибо что объяснили, вот вроде все понятно, но относительно задания не совсем, видимо за счет того, что маленькие размеры я просто не уловила движение этого сердечка. Потренируюсь потом на более больших элементах.
