Курс CSS. Пример 02 урока 43.

В данном примере в подключаемый внешний файл стилей добавляются стили из других файлов с помощью директивы @import

position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.

position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.

position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 43 и 60 пикселей от нижнего края.

position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.

position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.

-----------------

У нашей птички z-index:20; ↑ - это больше, чем у кнопки. Поэтому, несмотря на то, что птичка в хидере прописана первой, а кнопка идет за птичкой, все-таки, благодаря большему значению z-index, птичка своим хвостом закрывает кнопку. Именно этого визуального эффекта и хотел дизайнер.

-----------------

Кроме свойства width на практике также широко используются более гибкие свойства max-width (максимальная ширина элемента) и min-width (минимальная ширина элемента).

Часто они свойства используются совместно, когда дизайнер хочет обеспечить удовлетворительный вид страницы при любом разрешении экрана пользователя и при любых его действиях по уменьшению ширины окна.

Рассмотрим работу свойств max-width и min-width на примере.


Теперь попробуйте менять вручную ширину окна браузера. Первый блок будет менять свою ширину в зависимости от ширины родительского блока, а второй блок в рамках диапазона 600-650 пикселей.

Обратите внимание, что свойства max-width и min-width не включают в себя значения паддингов(padding), границ(borders) и маржинов(margins).

-----------------

↓

↓

↓

↓

↓

↓

↓

-----------------