1. Bitcoin адрес для пожертвований: 1dapfB97R98wg8J3hknWpMDJ7P61CWjNn
    Скрыть объявление
  2. Участникам форума доступны: Skype, WhatsApp и Telegram конференции. Присоединяйтесь!
  3. Наши основные группы и каналы: VK, Twitter. Подписывайтесь!
  4. Скрыть объявление

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

Тема в разделе "Архив", создана пользователем WTBG, 29 июл 2008.

  1. WTBG

    WTBG Старейшина

    Репутация

    0 / 0


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

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

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

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


    position

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

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

    top, right, bottom, left

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

    Значение:
    • auto - величина смещения выбирается браузером так, чтобы можно было разместить все элементы (по умолчанию).
    • любая соответствующая стандарту длина - число, представляющее величину смещения от края.
    • любое соответствующее стандарту процентное значение - отношение в процентах длины смещения к ширине элемента (для левого и правого края) или его высоте (для верхнего и нижнего края).
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. p {top: 20px; right: 40px}

    z-index

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

    Значение:
    • auto - элемент располагается на том же месте, что и его родительский элемент (по умолчанию).
    • любое соответствующее стандарту целое число - порядковый номер элемента в стеке.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. img {z-index: 3}

    Пожалуйста, войдите или зарегистрируйтесь для просмотра скрытого текста.



  2. nuvusuki

    nuvusuki Новичок

    Репутация

    0 / 0


    Хотя бы пару жизненных примеров привели бы