Не весь ЦСС умещается в блочную модель
Помните про флоу документа и блочную модель из пятого урока? Элементы идут друг за другом, между ними есть марджины, а внутри них — паддинги.
Но что делать, когда вам нужно элемент выбить из потока? Допустим, расположить кнопку где-нибудь слева снизу? Как у Гугла кнопка FAB в Материал дизайне.
Для этого в ЦСС есть методы позиционирования: позицией блока можно управлять через свойства position и top, left, right, bottom.
Дефолтное поведение position: static — блок учитывает флоу документа и всё у него хорошо. Топ/лефт/райт/боттом не работают.
Другие значения: absolute, relative, fixed и sticky.
Если вы укажете position: absolute и какие-нибудь значения из топ-лефт-райт-боттом, то элемент будет спозиционирован относительно экрана: top: 2px; left: 10px вынесет его сверху влево.
iframe: https://jsfiddle.net/8qp226xv/2/embedded/result,html,css/
Как вы видите, абсолютное позиционирование ломает блочную модель: блочные элементы начинают вести себя как инлайн-блочные — занимают не всю ширину, а только контент текста и паддингов.
Как исправить это? Вам нужно, чтобы блок всё равно занимал 100% ширины, а width: 100% не помогает (конечно, 100% от чего?).
Растяните блок через left: 0; right: 0 .
Если родителю задать position: relative, то его ребёнок с position: absolute будет учитываться относительно родителя.
iframe: https://jsfiddle.net/8qp226xv/1/embedded/result,html,css/
При fixed элемент остается фиксированным при скролле.
iframe: https://jsfiddle.net/8qp226xv/3/embedded/result,html,css/
Пока ещё не во всех браузерах работает (caniuse.com/position-sticky), но в будущем — очень полезная вещь.
До того, пока блок находится на экране — он ведёт себя в потоке. Когда вы его скроллите и он должен пропасть — он фиксируется как будто position: fixed.
(демка будет работать только в браузерах, которые указаны на (caniuse.com/position-sticky)
iframe: https://jsfiddle.net/8qp226xv/6/embedded/result,html,css/
Когда мы говорим про позиционирование, нужно помнить, что блок размещается по трём сторонам: x, y, z. За x и y отвечают left, right и top, bottom, а как наложить один элемент поверх другого? Используйте z-index.
iframe: https://jsfiddle.net/8qp226xv/7/embedded/result,html,css/