Позиционирование
Каскадные таблицы стилей позволяют определить положение блоковых елдементов документа двумя способами:
- абсолютное позиционирование, при котором существует жесткое определение положение элемента относительно окна браузера.
- относительное позиционирование, при котором положение элемента определяется относительно того бдокового элемента, внутри которого этот элемент находится.
43. Используемый метод позиционирования определяется свойством position. Свойство может принимать следующие значения:
- static - обычный элемент (по умолчанию).
- relative – каждый элемент потока позиционируется в конец предыдущего
- absolute – элемент и его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причем сам элемент или его потомки могут перекрывать ранее отображенные элементы.
- fixed – позиционирование со сойством absolute, но сам элемент фиксируется в окне браузера и при прокрутке окна не перемещается.
- inherit - принимается значение родительского элемента.
44. Изменение окна браузера не меняет положения абсолютно позиционируемого элемента. В связи с этим, при уменьшении размеров окна, такой элемент может оказаться за границами окна и, следовательно, быть невидимым для пользователя.
45. Свойства top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то они используются для смещения элемента относительно начала позиционированного элемента-родителя. В том случае, если значение элесентов не задано, им присваивается параметр AUTO.
46. Параметр AUTO для свойства top позиционирует верхний край элемента таким образом, что верхний край элемента совмещается с верхом последней строки текста родителя.
47. Параметр AUTO для свойства top позиционирует верхний край элемента по верхнему краю родителя в том случае, если родитель является изображением.
48. Свойство width задает ширину абсолютно позиционируемого элемента. В том случае, если это свойство не определено, элемент распространяется до правого края окна браузера.
49. Свойство height задает высоту абсолютно позиционируемого элемента. В том случае, если это свойство не определено, элемент распространяется насколько это необходимо для отображения содержимого элемента.
50. при использовании свойств width и height размер абсолютно позиционируемого элемента ограничивается. В том случае, если его содержимое имеет больший размер, оно становится невидимым для пользователя.
51. Если относительно позиционируемые элементы являются потомками абсолютно позиционируемых элементов, они позиционируются в конец своего элемента-родителя.
52. В том случае, если свойство position определено как static, то элементы отображаютя сразу после предыдущего элемента в выходном потоке. Существенным отличием статических элементов от элементов с относительным позиционированием является то, что для них не устанавливаются значения свойств top и left.
53.Свойство z-index позволяет определить порядок расположения и вывода элементов в выходном потоке. Данное свойство можно применять только при абсолютном позиционировании элемента.
Свойство может принимать значения:
- auto - элемент располагается на том же месте, что и его родительский элемент (принято по умолчанию).
- любое целое число - порядковый номер элемента в стеке. Чем выше порядковый номер, тем раньше выводится элемент.
- inherit - принимается значение родительского элемента.