При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.

Плавающие блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно. Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помощью параметра align.
Плавающие блоки определяются свойством float, которое определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта: left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны, right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны, none - блок не перемещается и позиционируется согласно свойству position.

Иногда нужно, чтобы блоки были прижаты к правому краю, но располагались один под другим. Для этого существует свойство clear, которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этого свойства может быть задано одно из четырех значений: left - блок должен располагаться ниже всех левосторонних блоков, right - блок должен располагаться ниже всех правосторонних блоков, both - блок должен располагаться ниже всех плавающих блоков, none - никаких ограничений нет, это значение по умолчанию.

#blok1 { border:1px solid red; width: 150px; height: 50px; float: right; }

#blok2 { border:1px solid red; width: 150px; height: 50px; float: right; clear: right; }

Виды и свойства блоков

Элементы могут быть блочными и строчными. По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a - строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство может принимать одно из четырех значений: display:block делает элемент блочным, display:inline делает элемент строчным, display:list-item делает любой элемент частью списка, display:none убирает элемент со страницы.

В CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока - visibility. Оно может принимать два значения: visible (отображать) и hidden (сделать невидимым). Различия здесь следующее: display:none скрывает элемент, как будто его и не было, а visibility:hidden делает элемент прозрачным.

Свойство overflow может принимать четыре значения: visible - если содержимое превышает размеры блока, оно все равно останется на экране, hidden - браузер отрежет содержимое, которое превышает размер блока, scroll - блок будет снабжен полосами прокрутки, причем как горизонтальной, так и вертикальной, auto - блок будет снабжен только теми полосами прокрутки, которые необходимы.

Слои

В CSS можно создать несколько слоев, на каждом разместить необходимые элементы и пронумеровать слои с помощью свойства z-index. Чем больше номер, тем выше слой находится в стопке слоев. Например, если сделать 6 слоев, то пользователь сначала увидит именно слой z-index:6.

Слои часто используются при создании раскрывающихся меню.

Списки

Как всегда CSS предоставляет большие возможности при создании списков, чем только HTML. Собственно свойств для списков существует всего три: list-style-type - определяет внешний вид маркера или нумератора, list-style-image - определяет пользовательское изображение маркера, list-style-position - определяет положение маркеров относительно блока.

Для маркированных списков list-style-type не содержит ничего нового, все теже значения, что и в HTML: disk - закрашенный кружок, circle - незакрашенный кружок, square - закрашенный квадрат. Для нумерованных списков перечень более широк, чем в HTML, но не все значения поддерживаются всеми браузерами. Поэтому пока рекомендуется использовать только следующие: decimal - десятичные числа, lower-roman - строчные римские цифры, upper-roman - прописные римские цифры, lower-alpha - строчные латинские буквы.

Свойство list-style-image позволяет задать свой вид маркера. Для этого надо создать картинку с маркером и указать ее адрес в стиле.

Свойство list-style-position определяет положение маркера: внутри блока - inside или снаружи – outside.

#spisok1 { list-style: circle url(marker.gif) inside; }

Литература

1. Хорстманн Кей С., Корнелл Гари. Java`2. Библиотека HTMпрофессионала, том II. Тонкости программирования. 7-е издание.: Пер. с англ. – М.: Издательский дом «Вильямс», 2008. – 1168 с.: ил. ISBN 978-5-8459-1033-2 (рус.).

2. http://docs.oracle.com/cd/B10501_01/appdev.920/a96621/adx04paj.htm#1003830

3. http://www.quizful.net/post/sax-parser-java

4. http://en.wikipedia.org/wiki/Object-relational_mapping

5. http://www.hibernate.org/hib_docs/reference/ru/html_single/

6. http://java-course.ru/student/book2/hibernate-annotation/

7. Дейтел, Х.М. Технологии программирования на Java 2. Книга 3. Корпоративные системы, сервлеты, JSP, Web-сервисы [Текст] / Х.М. Дейтел, П.Дж. Дейтел, С.И. Сантари. – М. : Бином-пресс, 2003. – 672 с.

8. Перри, Б.У. Java сервлеты и JSP. Сборник рецептов [Текст] / Брюс У. Перри. – М. : Кудиц-пресс, 2009. – 768 с.

9. Соломон, М.К. Oracle. Программирование на языке Java [Текст] / Мартин К. Соломон, Нирва Мориссо-Леруа, Джули Басу. – М. : Лори, 2010. – 512 с.

10. Курванян, Б. Программирование web-приложений на языке Java [Текст] / Буди Курванян. – М. : Лори, 2009. – 880 с.

11. JavaEEDocumentation [Электронный ресурс]. – Режим доступа: http://www.oracle.com/technetwork/java/javaee/documentation/index.html, дата доступа: 13.12.2013.

12. JavaEETutorials [Электронный ресурс]. – Режим доступа: http://www.oracle.com/technetwork/java/javaee/documentation/tutorials-137605.html, дата доступа: 13.12.2013.

13. http://orlova.rsue.ru/content/sst/j2ee1.htm

14. https://ru.wikipedia.org/wiki/HTTP_cookie

15. http://learn.javascript.ru/#book-toc-137