Уважаемые специалисты и асы, оцените пжл верно ли я вообще мыслю.
Обязательно ли задавать . post относительное позиционирование?
Спасибо!
html,
body {
margin: 0;
padding: 0;
}
Что-то у вас слишком много абсолюта вышло.
position: absolute должно применяться в исключительных случаях - например, чтобы аккуратно разместить декоративный элемент, приписывать его всем элементам не нужно. Абсолютно спозиционированные элементы вырываются из потока, соседи о них ничего не знают. А у вас получились практически все абсолютные и независимые. А теперь представьте, что будет, если у вас текста в заголовке или в абзаца станет чуть больше, или ссылка из “интенсива” превратится в “базовый интенсив” - размер элемента увеличится, но его “соседи” ничего об этом знать не будут и место ему уступать не станут. И получится, что один блок наезжает на другой.
по поводу относительного позиционирования: задавая относительное позиционирование родительскому элементу, мы создаем новую точку начала координат для дочернего “абсолютного” элемента, мы “связываем” родителя и дочерний элемент - и если положение родителя изменится, то положение дочернего элемента изменится вслед за ним.
А вот использовать абсолютное позиционтрование только в исключительных случаях - а какой тогда способ передвижения элемента универсальный или предпочтительный?
смотря какой вы элемент двигаете: если декоративный (например, разместить иконку рядом со ссылкой) - то позиционирование; если разметить сетку страницы - например, разместить элементы в несколько колонок - то флоаты или ещё лучше флексы
}
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адреса картинок:
/assets/course14/quotes.png
/assets/course14/post-challenge.png
Картинка «кавычки» выровнена по центру
*/
ох, давайте разбираться ещё раз. Абсолют используем только для декоративных элементов. Что у нас здесь декоративного? Это во-первых, иконки. Дальше, к декоративным можно отнести квадратики с датой и кавычками - у них заданы фиксированные размеры и можно надеяться, что они не будут меняться и влиять на поток документа. Всё. На этом декоративные элементы закончились.
Абсолютно спозиционированные элементы нужно “привязать” к своим родителям - чтобы при смещении той же ссылки, иконка двигалась вместе с ней. Находим родителей и задаем им относительное позиционирование.
Дальше, если теперь посмотреть на наш пост без декоративных элементов (без квадратиков) - то это просто блок информации с пустым полем слева (на это пустое поле мы и позиционировали квадратики). Это одна колонка, поэтому никакие флоаты не нужны. Представьте, что у вас есть див с текстом - как сделать, чтобы текст был смещен вправо, а слева была пустая область? Задать внутренний отступ слева - и все содержимое сместиться вправо. Точно так же и здесь: у нас есть див-обертка .post и есть его содержимое (заголовок, ссылки, текст), которое нужно сместить вправо, чтобы слева осталось пустое поле. (иконки рядом ссылками мы будем размещать по точно такой же схеме: задаем падинг родителю, чтобы отодвинуть содержимое-ссылку и освободить место под иконку)
Tala, большое спасибо! Вроде теорию выучила но в голове как то не улеглось как это применять на практике…спасибо за подсказку или даже за целый урок)))!
вообще оно само как-то укладывается в голове по мере прохождения курсов. А после интенсива - так вообще: раскладывается по полочкам и достается только нужное.
Все получилось!! Но тут конечно главная проблема в правильном понимании изначально что перед глазами, т.е. базовая ситуация. А с этим пока сложности. Есть инструменты, но как их и где применять …тут придется поразбираться). Интенсив у меня в планах. Спасибо))).