НОУ ИНТУИТ | Введение в стандарты Web. Лекция 36: Статическое и относительное позиционирование CSS

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 28.11.2008 | Уровень: для всех | Доступ: свободно

Вам нравится? Нравится 188 студентам

| Поделиться |

Поддержать программу

Относительное позиционирование

Относительное позиционирование является схемой позиционирования в CSS, но оно более тесно связано со статическим "позиционированием", чем с другими родственниками - абсолютным и фиксированным позиционированием.

Элемент с position:relative сначала размещается также как любой статический элемент, как блочный или строковый. Но затем происходит нечто интересное: сгенерированный бокс смещается согласно свойствам top, bottom, left и right.

Необходимо помнить об относительном позиционировании, что смещается только сгенерированный бокс. Элемент по-прежнему остается там, где он был в потоке статического документа. Именно здесь он "занимает место" насколько это касается других элементов. Это означает, что смещенный бокс может перекрывать боксы других элементов, так как они по-прежнему действуют, как если бы относительно позиционированный элемент остался там, где он должен был быть, перед применением позиционирования. Что касается потока документа, то элемент не смещается - это просто конечный визуальный результат, который показывает смещенный бокс. Давайте посмотрим это на практике.

1. Скопируйте приведенный ниже код HTML в новый документ в текстовом редакторе и сохраните его как relative.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <title>Relative Positioning</title>
</head>
  <body>
    <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit.
    Curabitur feugiat feugiat purus.
    Aenean eu metus. Nulla facilisi.
    Pellentesque quis justo vel massa suscipit sagittis.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
    Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem.
    Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.
    Sed sagittis, <span>metus a semper</span> dictum, sem libero sagittis nunc, vitae adipiscing leo neque vitae tellus.
    Duis quis orci quis nisl nonummy dapibus.
    Etiam ante. Phasellus imperdiet arcu at odio.
    In hac habitasse platea dictumst. Aenean metus.
    Quisque a nibh. Morbi mattis ullamcorper ipsum.
    Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
    Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.
    Proin lectus purus, vehicula et, cursus ut, nonummy et, diam. </p>
  </body>
</html>

2. Откройте этот файл в Web-браузере, чтобы увидеть, как он выглядит на этом этапе -- вы должны увидеть только простой параграф текста.

Создайте в редакторе новый документ, скопируйте в него приведенный ниже код CSS, и сохраните файл как style.css.

p {
  width: 20em;
}

span {
  background-color: lime;
}

Соедините таблицу стилей с документом HTML, вставляя следующую строку сразу перед тегом </head>:

<link rel="stylesheet" type="text/css" href="style.css" >

Сохраните оба файла и перезагрузите страницу в браузере.

Я сузил параграф, чтобы разрывы строк произошли в одних и тех же позициях даже в небольших окнах браузеров. Элемент span имеет теперь яркий цвет фона, чтобы сделать его более заметным.

Затем давайте модифицируем таблицу стилей, добавляя в правило три объявления для элемента span:

span {
  position: relative;
  top: 1em;
  left: 2em;
  background-color: lime;
}

Сохраните и перегрузите страницу в браузере, чтобы увидеть результат относительного позиционирования.

Мы сместили элемент span по вертикали и горизонтали. Обратите внимание, как он теперь перекрывает следующую строку текста, и как появилась пустая дыра там, где он был раньше.

Такое смещение сгенерированного бокса, может быть не тем, что вы ожидали от кода. Вы определили top:1em, но бокс сместился вниз. Бокс также сместился вправо, даже хотя вы определили left:2em. Почему это происходит?

Ключом к пониманию, как эти свойства работают с относительным позиционированием, является осознание, что они определяют край, к которому применяется смещение, а не направление движения. Другими словами, свойство top смещает бокс относительно его верхнего края, свойство left смещает бокс относительно его левого края, и т.д. Бокс смещается от указанного края, поэтому top:1em смещает бокс на 1em от верхней позиции - другими словами, вниз. Отрицательные значения смещают бокс в противоположном направлении, поэтому bottom:-1em то же самое, что top:1em.

Это ведет к другому заключению: бессмысленно определять оба свойства, top и bottom (или left и right ) для одного элемента. Правила CSS говорят, что bottom должно игнорироваться, если определено top. Для горизонтального перемещения это зависит от свойства direction. Если направление задано слева направо, то игнорируется right, если заданы одновременно left и right ; если направление задано справа налево, то игнорируется left.

Рассматриваемый в данный момент пример объясняет относительное позиционирование, но он кажется не слишком полезным, не так ли? Для чего же используется относительное позиционирование? Давайте посмотрим на более развитый пример.

Дальше >>

Авторизоваться

Введение в стандарты Web

Статическое и относительное позиционирование CSS

Относительное позиционирование

Вопросы и ответы