И еще раз вернемся на главную страничку CSS, и еще раз бросим взгляд на роддом блочных элементов.

Элементы здесь появляются на свет в естественном виде, сверху вниз. Тип позиционирования определяется свойством position. Позиционирование по умолчанию имеет свойство static.

Давайте, разбирем для начала теоретические моменты.

Возможные значения свойства position

Значение	Пояснение
position:static;	По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа. Default. Elements render in order, as they appear in the document flow.
position:absolute;	Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка. The element is positioned relative to its first positioned (not static) ancestor element.
position:fixed;	Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края. The element is positioned relative to the browser window. See below... ↓
position:relative;	Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции. The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.
position:inherit;	Значение свойства position (позиционирование) наследуется от своего родителя. The value of the position property is inherited from the parent element.

Теперь сделаем небольшую HTML заготовку: Сам контент как таковой набран просто, чтобы заполнить место. Я подумал, что лучше уж заполнить информацией по теории вопроса, чем повторять латинскую бессмыслицу.

Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_034_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_034_001.zip ← скачайте пример, чтобы установить на свой сайт...

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