CSS

Позиционирование

меню

Позиционирование position css


      Позиционирование  

CSS позволяет определить точное положения HTML-элементов.
С помощью CSS программист может размещать содержимое двумя способами:

   1. абсолютное позиционирование позволяет указывать положение содержимого по отношению окна браузера.

   2. относительное позиционирование по отношению к элементу, внутри которого это содержимое находится.

Позиционирование

      position  

Определяет используемый метод позиционирования.

Значение:

  • static - обычный элемент, использующий установленную по умолчанию HTML-структуру (по умолчанию).
  • relative - позиционирование элемента является смещением по отношению к его обычному положению в общей структуре страницы.
  • absolute - позиционирование элемента определяется смещением по отношению к положению содержащего его элемента, и они не влияют на общую структуру.
  • fixed - позиционирование элемента является смещением, как и в случае со значением absolute, но сам элемент фиксируется в окне браузера и при прокрутке окна не перемещается.
  • inherit - принимается значение родительского элемента.

   p {position: absolute}

      top, right, bottom, left  

Позиционирование

Определяет величину смещения от определенного края (соответственно верхнего, правого, нижнего и левого).

Значение:

  • auto - величина смещения выбирается браузером так, чтобы можно было разместить все элементы (по умолчанию).
  • любая соответствующая стандарту длина - число, представляющее величину смещения от края.
  • любое соответствующее стандарту процентное значение - отношение в процентах длины смещения к ширине элемента (для левого и правого края) или его высоте (для верхнего и нижнего края).
    Позиционирование
  • inherit - принимается значение родительского элемента.

Позиционирование
   p {top: 20px; right: 40px}

Примеры: [1][2]

      z-index  

Позиционирование

Определяет порядок расположения элементов в стеке (slacking order).

Значение:

  • auto - элемент располагается на том же месте, что и его родительский элемент (по умолчанию).
  • любое соответствующее стандарту целое число - порядковый номер элемента в стеке.
  • inherit - принимается значение родительского элемента.

   img {z-index: 3}

Примеры: [1]

Позиционирование
На верх Написать письмо WEB-мастеру Печать Добавить в избранное Cделать стартовой