|
|
Позиционирование position css слои
Реклама от Google
Поиск
Позиционирование
CSS позволяет определить точное положения HTML-элементов.
С помощью CSS программист может размещать содержимое двумя способами:
1. абсолютное позиционирование позволяет указывать положение содержимого по отношению окна браузера.
2. относительное позиционирование по отношению к элементу, внутри которого это содержимое находится.
Позиционирование
Определяет используемый метод позиционирования.
Значение:
- static - обычный элемент, использующий установленную по умолчанию HTML-структуру (по умолчанию).
- relative - позиционирование элемента является смещением по отношению к его обычному положению в общей структуре страницы.
- absolute - позиционирование элемента определяется смещением по отношению к положению содержащего его элемента, и они не влияют на общую структуру.
- fixed - позиционирование элемента является смещением, как и в случае со значением absolute, но сам элемент фиксируется в окне браузера и при прокрутке окна не перемещается.
- inherit - принимается значение родительского элемента.
p {position: absolute}
Позиционирование
Определяет величину смещения от определенного края (соответственно верхнего, правого, нижнего и левого).
Значение:
- auto - величина смещения выбирается браузером так, чтобы можно было разместить
все элементы (по умолчанию).
- любая соответствующая стандарту длина - число, представляющее величину смещения от края.
- любое соответствующее стандарту процентное значение - отношение в процентах длины
смещения к ширине элемента (для левого и правого края) или его высоте (для верхнего и
нижнего края).
Позиционирование
- inherit - принимается значение родительского элемента.
Позиционирование
p {top: 20px; right: 40px}
Примеры: [1][2]
Позиционирование слои
Определяет порядок расположения элементов в стеке (slacking order).
Значение:
- auto - элемент располагается на том же месте, что и его родительский элемент (по
умолчанию).
- любое соответствующее стандарту целое число - порядковый номер элемента в стеке.
- inherit - принимается значение родительского элемента.
img {z-index: 3}
Примеры: [1]
Позиционирование
|
position
