79380

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

Конспект урока

Педагогика и дидактика

Смещение в этом случае будет происходить не относительно «родительского» элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке. Это будет понятнее на примере. Пусть у нас есть html-страница с тремя div-ами...

Русский

2015-02-11

85.5 KB

0 чел.

PAGE   \* MERGEFORMAT 1

Урок 4

Урок 11. Относительное позиционирование

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

<html>

  <head>

    <title>Относительное позиционирование</title>

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

  </head>

  <body>

    <div id="blok1">Блок 1</div>

    <div id="blok2">Блок 2</div>

    <div id="blok3">Блок 3</div>

  </body>

</html>

    

Давайте зададим в таблице стилей размеры и границы этих блоков:

#blok1, #blok2, #blok3 {

border:1px solid red;

width:150px;

height:50px;

}

    

Сейчас наша страница в браузере выглядит так:



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

#blok1, #blok2, #blok3 {

border:1px solid red;

width:150px;

height:50px;

}

#blok2{

position:relative;

left:50px;

top:25px;

}

    

Теперь наша страница выглядит так:



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

Плавающие блоки

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

Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра 
align

Плавающие блоки определяются свойством 
float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:

  •  left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.
  •  right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.
  •  none - блок не перемещается и позиционируется согласно свойству position.

Давайте посмотрим на примере. Пусть у нас есть html-страница со следующим кодом:

<html>

  <head>

    <title>Позиционирование блоков</title>

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

  </head>

  <body>

    <div id="blok1">Текст блока 1</div>

    Просто какие-то элементы на странице. Это может быть просто

    текст, ссылки, списки, картинки и т.д.     

  </body>

</html>

    

И страница style.css со следующим кодом:

#blok1{

border:1px solid red;

width:150px;

height:50px;

}

    

Сейчас наша страница в браузере выглядит так:



Давайте сделаем наш блок плавающим и прижмем его к левому краю:

#blok1{

border:1px solid red;

width:150px;

height:50px;

float:left;

}

    

Теперь наша страница в браузере выглядит так: 



Теперь давайте прижмем блок к правому краю:

#blok1{

border:1px solid red;

width:150px;

height:50px;

float:right;

}

    

Теперь наша страница в браузере выглядит так: 



А что будет, если плавающих блоков на странице несколько? Давайте добавим в нашу html-страницу еще один блок:

<html>

  <head>

    <title>Позиционирование блоков</title>

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

  </head>

  <body>

    <div id="blok1">Текст блока 1</div>

    <div id="blok2">Текст блока 2</div>

    Просто какие-то элементы на странице. Это может быть просто

    текст, ссылки, списки, картинки и т.д.

  </body>

</html>

    

И зададим им разные значения свойства float:

#blok1{

border:1px solid red;

width:150px;

height:50px;

float:left;

}

#blok2{

border:1px solid red;

width:150px;

height:50px;

float:right;

}

    

Теперь наша страница в браузере выглядит так:



А если у них будут одинаковые значения? Например
:

#blok1{

border:1px solid red;

width:150px;

height:50px;

float:left;

}

#blok2{

border:1px solid red;

width:150px;

height:50px;

float:left;

}

    

Тогда второй блок прижмется к правому краю первого блока:



Аналогична будет ситуация при одинаковых значениях 
right:

#blok1{

border:1px solid red;

width:150px;

height:50px;

float:right;

}

#blok2{

border:1px solid red;

width:150px;

height:50px;

float:right;

}

    





Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2.

А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство 
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;

}

    

Теперь получилось так, как и хотелось: один блок под другим:



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

Давайте посмотрим, как ее можно сделать с помощью плавающих блоков. Итак, код самой страницы следующий:

<html>

  <head>

    <title>Позиционирование блоков</title>

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

  </head>

  <body>

    <div id="header">шапка сайта</div>

    <div id="menu">меню</div>

    <div id="content">

      контент

      <div id="news">блок новостей</div>

    </div>

    <div id="footer">низ сайта</div>

  </body>

</html>

    

На странице style.css зададим сначала размеры и фон для наших блоков:

#header{

background:darkred;

width:715px;

height:100px;

}

#menu{

background:oldlace;

width:190px;

height:300px;

}

#content{

background:oldlace;

width:525px;

height:300px;

}

#footer{

background:darkred;

width:715px;

height:30px;

}

#news{

background:yellow;

width:150px;

height:280px;

}

    

Сейчас наши блоки располагаются в нормальном потоке, т.е. один под другим. Нам надо сделать блоки menu и contentплавающими и левосторонними. А блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком:

#header{

background:darkred;

width:715px;

height:100px;

}

#menu{

background:oldlace;

width:190px;

height:300px;

float:left;

}

#content{

background:oldlace;

width:525px;

height:300px;

float:left;

}

#footer{

background:darkred;

width:715px;

height:30px;

}

#news{

background:yellow;

width:150px;

height:280px;

float:right;

}

    

Наша страница в браузере выглядит так:

Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке 
content. А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева. 

Почему же у нас так не получилось? Потому что наш блок 
news в html-коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш div="news" выше текста (т.е. до слова "контент"):

<html>

  <head>

    <title>Позиционирование блоков</title>

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

  </head>

  <body>

    <div id="header">шапка сайта</div>

    <div id="menu">меню</div>

    <div id="content">

      <div id="news">блок новостей</div>

      контент

    </div>

    <div id="footer">низ сайта</div>

  </body>

</html>

    

Вот теперь наш блок новостей находится на своем месте:


А чтобы он не прижимался вплотную к верхнему и правому краям, мы добавим для этого блока значение полей:

#news{

background:yellow;

width:150px;

height:280px;

float:right;

margin:10px;

}

    

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


Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).
Фиксированные блоки

Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.

У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать их пока не следует. Поэтому здесь мы лишь укажем синтаксис такого правила, если хотите попробуйте сами (например, в браузере Opera).

#blok{

position:fixed;

left:0px;

top:0px;

}

    

Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.


 

А также другие работы, которые могут Вас заинтересовать

45241. ПР - текст как форма маркетинговой коммуникации: жанровая разновидность, технологии создания 44.5 KB
  ПР текст как форма маркетинговой коммуникации: жанровая разновидность технологии создания. И в том и в другом случае единицей коммуникации является текст который организуется с целью достижения максимального воздействия на реципиента. В узком смысле: Текст результат речетворческого процесса который характеризуется признаками: завершенность связность цельность жанровая оформленность. Как организованное множество языковых знаков текст приобретает смысл лишь в процессе коммуникации т.
45242. Этапы и технологии формирование материалов паблисити 28 KB
  Источник сообщения ничего не платит прессе за размещение. Этапы формирования: подготовительный сбор информации о фирме и ее деятельности статистика история маркетинговая информации: анализ информации в зависимости от вида СМИ; структурирование материала – выстраиваем структуру фирменный бланк и различия в соответствии с формой подачи – прессрелиз и т. Жанровая разновидность паблисити: Оперативноновостной: приглашение прессрелиз краткая новостная информация. Комбинированные тексты подборка информационных материалов...
45243. статья. Технология создания: Приглашение: адресное обращение к аудитории четкая социальная ориентация; . 32 KB
  Исследовательско-новостной комментирующий новость: бэкграундер не сама новость а то что под ней лист вопросов-ответов. Прессрелиз сто сообщение содержащее важную новость или полезную информацию для широкой аудитории.; шрифт – 14; интервал – 15; принцип перевернутой пирамиды: заголовок – суть и интрига; 1 абзац – лидерабзац содержит новость; комментарии и иллюстрации к новости – 34 позиции в порядке убывания; резюме; призыв к действию; даты написания прессрелиза и публикации в СМИ; координаты специалиста составившего...
45244. Информационные ПР-акции: функции, формы, каналы коммуникации 29.5 KB
  Формы: пресс-конференция конференция брифинг семинар симпозиум день открытых дверей телемост имиджевые теле и радио интервью и т. Теле и радио интервью: информационные цели – формирование информационного имиджа; представление руководства. Классификация интервью: интервьюмнение интервьюфакт имиджевое интервью. Инициаторы интервью: журналисты прессслужба.
45245. Брифинг как информационная ПР - акция: цели, аудитория, методика подготовки 28 KB
  Брифинг как информационная ПР акция: цели аудитория методика подготовки Брифинг это плановое мероприятие которое проводится с регулярной периодичностью и посвящается распространению текущей информации о деятельности организации или компании. Например брифинги регулярно проводит министерство иностранных дел. На брифингах министерства внутренних дел проходящих раз в неделю можно услышать официальную статистику ДТП раскрытых преступлений узнать о планируемых профилактических мерах по борьбе с организованной преступностью. Еще одна...
45246. Методика подготовки и проведения пресс-конференций 34.5 KB
  Методика подготовки и проведения пресс-конференций Тема: социально-значимая и актуальная не коммерческая дискуссионная диалог спор. Пресс-конференция проводится по мере накопления информации или при наличии глобальных новостей. Мотивация: мотивация организации пресс-конференции; мотивация журналистов статусные персоны корпоративность – присутствие всех СМИ наличие компромата самопрезентация. Прессконференция проводится при хорошем знании журналистов критическая масса – 30 – 40.
45247. Корпоративные коммуникации и материалы корпоративной прессы: виды, функции, принципы организации 34 KB
  В результате оглашения конкретных цифр и фактов сотрудники получают полное представление о готовых итогах развития и перспективах роста компании. Такой отчет может содержать: письмо руководителя в котором выражается благодарность сотрудникам и описывается работа компании ее основные достижения в течение года; отчет об использовании фондов. Этот документ часто оформляется в виде графиков и диаграмм характеризующих использование организацией поступивших средств; анализ финансового положения предприятия; отчет об участии компании в...
45248. Деятельность корпоративной радиостанции и ТВ-центра: приоритеты, аудитория, содержание коммуникации 26.5 KB
  Обычно это организаци-ипартнеры со схожими корпоративными стандартами и принципами. Приоритеты: Главным приоритетом в деятельности корпоративной радиостанции и ТВ центра является формирование корпоративной культуры организации. Сообщения транслируемые по радио и ТВ должны отвечать на следующие вопросы: что происходит в организации почему это происходит в организации что должно произойти в организации Аудитория: Обычно эти самые радиостанции пли ТВ центры находятся на территории самой компании и вещают только на их территории то...
45249. Цели и содержание деятельности корпоративного сайта 28.5 KB
  Цели которые преследуют создатели сайтов: улучшение имиджа и поднятие престижа компании; продвижение торговой марки; доступность информации о продуктах и ценах для клиентов; поддержка дилерской сети доступность информации о продуктах и ценах для дилеров; прямая продажа продукции в Internet организация виртуального магазина; доступность внутренней информации для сотрудников работающих вне офиса; другое. служит дополнительным элементом фирменного стиля; укрепляет имидж и престиж поскольку в российских условиях не каждая...