Курс CSS. Пример 01 урока 40.

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

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

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

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

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

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

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

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

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

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

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

В этом блоке отсутствуют свойства определения ширины width, max-width, min-width.
Ширина блока определяется автоматически и полностью зависит от разрешения экрана и ширины родительского элемента.

В этом блоке заданы свойства определения ширины:
max-width:650px;
min-width:600px;
Величина ширины блока не может выходить за границы указанных значений.

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

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

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

↓

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