ГлавнаяИгрыCounter-strike

GoToWeb - Видеокурс Html и Css, урок 34, Позиционирование в CSS

Просмотров 164
Добавлено: 9 дней назад
Встроить видео
0%
Добавьте следующий код на свою страницу, чтобы встроить это видео:
<iframe src="http://tng.pw/embed/123758/" width="650" height="405" frameborder="0"></iframe> <br />
<a href="http://tng.pw//123758/">GoToWeb - Видеокурс Html и Css, урок 34, Позиционирование в CSS</a>
Видео входит в курсы: видеокурс контре

https://youtu.be/InFdMPy3K4g
В видеоуроке рассмотрены все виды позиционирования элементов html при помощи CSS-свойства position. Также разобраны отличия видов позиционирования друг от друга, особенности каждого позиционирования, задание позиционированным элементам специальных свойств top, bottom, left, right и z-index. Показаны примеры использования позиционирования для создания слоя, перекрывающего весь экран (вместе с pop-up) и для создания простой кнопки закрытия всплывающего окна.

Содержание видеоурока:
02:15 – общая информация о позиционировании элементов при помощи CSS-свойства position, значение по умолчанию – static.
04:10 – относительное позиционирование – position: relative.
04:50 – смещение относительно позиционированного элемента при помощи свойств top, bottom, left, right.
07:07 – одновременное задание двух «противоположных» свойств для смещения позиционированного элемента (например, top и bottom, left и right) при наличии у элемента свойств width и height.
09:15 – абсолютное позиционирование – position: absolute, отличия от относительного позиционирования.
11;47 - смещение абсолютно позиционированного элемента при помощи свойств top, bottom, left, right. Точки отсчета для смещения элемента при абсолютном позиционировании.
14:44 – относительное позиционирование – position: fixed.
16:20 - свойство z-index - управляет положением позиционированных элементов по оси z, которая направлена перпендикулярно экрану монитора.
21:39 – возможные значения свойства z-index, в частности, «- 1».
26:10 - одновременное задание двух «противоположных» свойств для смещения позиционированного элемента (например, top и bottom, left и right) при отсутствии у элемента свойств width и height.
29:45 – центрирование позиционированного элемента по горизонтали и вертикали.
32:30 – пример использования позиционирования для создания слоя, перекрывающего весь экран, вместе с pop-up.
40:29 – пример использования позиционирования для создания простой кнопки закрытия всплывающего окна.

Рекомендуем:

Counter-strike
Добавлено: 29 дней назад