Позиционирование и z-индекс

Ответы на вопросы

1. Что такое позиционирование?

   Ответ. Позиционирование — это управление координатами размещения элемента в окне браузера.

2. При помощи какого свойства можно задавать позиционирование?

   Ответ. CSS предлагает для позиционирования свойство position.

3. Какие виды позиционирования предлагает CSS?

   Ответ. При помощи CSS можно задавать абсолютное и относительное позиционирование элементов на странице.

4. Почему при использовании позиционирования важно представлять иерархическую структуру элементов на гипертекстовой странице?

   Ответ. Положение позиционированных элементов задаётся в системе координат, связанной с первым позиционированным предком по иерархической лестнице. Если таких предков нет, то система координат связывается с элементом BODY.

5. Какие значения имеются у свойства position и что они означают?

   Ответ. Для свойства position, с помощью которого можно задавать позиционирование, предусмотрены следующие значения: absolute, fixed, relative, static.

   Пусть элемент Y является потомком элемента X, который абсолютно или относительно позиционирован, или является элементом BODY.

   

   Пусть для элемента Y задано позиционирование и определены координаты при помощи свойств left и top. Тогда

   • Абсолютное позиционирование position:absolute смещает Y в точку, которая отстоит от левого верхнего угла X на left по горизонтали и на top по вертикали независимо от места расположения элемента Y в HTML-коде среди других потомков X.

     

   • Фиксированное позиционирование position:fixed работает как абсолютное, но отключает перемещение элемента при прокрутке окна.
   • Относительное позиционирование position:relative смещает элемент Y на left по горизонтали и на top по вертикали относительно того места, которое Y занимал бы на экране без позиционирования. Таким образом, положение элемента на экране зависит, как от значений свойств left и top, так и от места элемента Y в коде среди других потомков элемента X.

     

   • Статическое позиционирование position:static размещает элемент так, как он располагался бы без всякого позиционирования. То есть задание свойств left и top никакого влияние на расположение элемента не оказывает.
6. Какие свойства позволяют управлять координатами элементов при их позиционировании?

   Ответ. Координаты позиционированного элемента можно задавать при помощи следующих свойств:

   • left определяет смещение левой границы элемента вправо;
   • right определяет смещение правой границы элемента влево;
   • top определяет смещение верхней границы элемента вниз;
   • bottom определяет смещение нижней границы элемента вверх.
7. Как работает свойство z-index, и какие у него могут быть значения?

   Ответ. Стилевое свойство z-index позволяет задать номер плоскости, в которой будет расположен элемент вместе со своими потомками. В качестве значения этого свойства рекомендуется записывать целые неотрицательные числа.

   Из двух плоскостей та расположена выше, у которой значение свойства z-index больше.

   Свойство z-index используется только для относительно или абсолютно позиционированных элементов.

   По умолчанию элемент расположен в плоскости с номером 0.

8. Как работает свойство float, и какие у него могут быть значения?

   Ответ. Свойство float задаёт так называемый “плавающий” блок — элемент уровня блока, прижатый к левой (значение float:left) или правой (значение float:right) границе родительского элемента. Остальные элементы обтекают плавающий блок соответственно справа или слева:

   

9. Как работает свойство clear, и какие у него могут быть значения?

   Ответ. Свойство clear используют, чтобы прекратить обтекание блока, в котором задано свойство float.

   У этого свойства имеются следующие значения:

   • left — прекращает обтекание float:left;
   • right — прекращает обтекание float:right;
   • both — прекращает любое обтекание.

Возврат
На начало урока 10