Применение относительного позиционирования


Вы хотите располагать контент, основываясь на его местоположении в документе. Другими словами, при визуализации Web-обозревателем потока макета страницы положение элемента изменяется относительно его стандартной позиции.
В таблице стилей используйте свойство position со значением relative. Добавьте также свойство top, left или оба для указания нового положения элемента.
С помощью следующего правила CSS для изображения картинка может перемещаться по тексту абзаца:
. .relative { position: relative; top: lOOpx;. left: 20px;
}
В отличие от абсолютного позиционирования отображение примера начинается не с верхнего левого края окна, а с того места, где располагался бы элемент р, если бы он был единственным. Код предписывает Web-обозревателю сместить абзац на 100 пикселов вниз от верхней границы и на 20 пикселов вправо от левой границы исходной позиции абзаца, а не от границы окна.
В случае абсолютного позиционирования контент смещается от границ текущего блока точно в то место, которое задают свойства.
Применение сцепленного позиционирования
Вы хотите смещать элемент с учетом ограничений, налагаемых размерами другого элемента. Например, вам нужно поместить изображение обложки книги в темное поле, а не в левый верхний угол окна просмотра Web-обозревателя.
Сначала в родительском элементе задайте значение relative в свойстве position:
#content { position: relative; width: 200px; height: 200px; margin: 10% auto; background: #2942c4;
}
Затем задайте дочерний элемент с абсолютным позиционированием, используя свойства смещения top, right, bottom и left для сдвига этого элемента в границах родительского элемента.

Если у элемента абсолютное позиционирование, он изымается из нормального потока и его размещение зависит от элемента, который его содержит (родителя). В большинстве случаев оказывается, что это основной или корневой элемент Web-документа, как правило, элемент html.
Но контекст этого элемента-контейнера может изменяться.
Если родительский элемент тоже позиционирован, элемент с абсолютным позиционированием оказывается отсоединенным от корневого элемента (обычно левого верхнего угла окна просмотра, если не заданы свойства смещения). Описанный эффект называется изменением контекста родительского элемента. Я называю это сцеплением, потому что так короче.
Создание стека элементов с помощью z-index
На вашей странице есть элемент, накладывающийся на другой элемент и мешающий его просмотру.
Используйте свойство z-index в сочетании со свойством position, имеющим одно из значений: absolute, relative ИЛИ fixed: div.image { position: relative; z-index: 20; width: 13px; height: 14px;
background-image: url(star.gif); background-repeat: no-repeat;
}
Цифровые изображения формируются из слоев. Верхний слой закрывает все, что находится на нижних слоях. Эта аналогия подходит для свойства z-index. Элемент с большим значением z-index закрывает элемент с меньшим значением.
Если вы применяете несколько элементов со свойством z-index, старайтесь использовать значения кратные 10 (т. е. 10, 20, 30), а не 1, 2, 3 и т. д. Такой подход позволит включать другие, незапланированные элементы, не нарушая порядка наложения элементов, и не приведет к необходимости переопределять их значения.



Правельные рецепты CSS