Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Урок 13: Позиционирование блоков




Технология CSS позволяет размещать что угодно, там где Вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, списки, в общем, все, что является блоковой моделью. Это помогает создать действительно прикольный, уникальный дизайн.

Рассмотрим две основные модели позиционирования:

· Абсолютное позиционирование (POSITION: ABSOLUTE;)

· Относительное позиционирование (POSITION: RELATIVE;)

 

Абсолютное позиционирование (POSITION: ABSOLUTE;)

Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать, что это позиционирование абсолютное, пишут значение ABSOLUTE. Затем, используя ключевые слова top, right, bottom, left, указывают необходимые координаты, которые отсчитываются от краев окна браузера.

Посмотрите на рисунок ниже. Я специально сделал рамку боксу, чтобы было более понятно, откуда отсчитываются координаты.

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

Рассмотрим, обычный документ с одним изображением, и обтекающим его текстом.

  • Смотреть пример boksovaya_model_primer12.htm

 

 

А теперь, спозиционируем изображение, для чего создадим класс, и присвоим его изображению. Код класса, выглядит примерно так:

.smile{
border: 1px solid red;
position: absolute;
top: 100px;
right: 100px;
}

Ну а с html, думаю, проблем у Вас не будет, чтобы применить класс к изображению, пишем

<img class="smile">

  • Смотреть пример boksovaya_model_primer13.htm

 

Что мы видим? как я уже писал раньше, изображение удалилось из того места, где оно было (вместо изображения теперь там текст), и переместилось соответственно указанным координатам. В примере выше, я сделал красную рамку, чисто для того, чтобы было нагляднее понятно, что координаты отсчитываются правильно. А вообще, ее лучше не ставить :)

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

Вот еще пример стиля:

.smile{
position: absolute;
bottom: 300px;
left: 100px;
}

· Смотреть пример boksovaya_model_primer14.htm

Если необходимо зафиксировать блок, т.е. чтобы он не прокручивался вместе с основным содержимым, т.е. не скролился, то необходимо указать значение FIXED.

.smile{
position: fixed;
bottom: 300px;
left: 100px;
}

· Смотреть пример boksovaya_model_primer15.htm


Относительное позиционирование (POSITION:RELATIVE;)

При относительном позиционировании, бокс смещается, но его прежнее место ничего не заполняет. Обозначается в как POSITION: RELATIVE;

Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.

Вот пример простого документа с текстом и рисунком:

· Смотреть пример boksovaya_model_primer12.htm

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

Css код:

.smile{
border:1px solid red;
position: relative;
top: 200px;
left: 100px;
}

· Смотреть пример boksovaya_model_primer16.htm

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

Ниже Вы можете наблюдать скриншот из предыдущего примера, с пояснениями координат:

 

 

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

Урок 14: Плавающие блоки (свойство float)

В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще, с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Поэтому, мне кажется, что очень важно разобраться как это работает!

Итак, Плавающие блоки в CSS определяются свойством float.







Дата добавления: 2014-12-06; просмотров: 279. Нарушение авторских прав

Studopedia.info - Студопедия - 2014-2017 год . (0.008 сек.) русская версия | украинская версия