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" будет при прокрутке страницы оставаться на месте.


 

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

81752. Тема свободы и ее философское звучание в произведениях русской поэзии 19 века 29.57 KB
  Таков и мцыри и лирический герой стих. Парус Лермонтовский герой герой романтический мятежный поэтому страсти его всегда максимально накалены а его внутренний мир чрезвычайно сложен. Лирический герой противопоставляет себя обществу и оно не приемлет его. герой одинок как и парус в тумане моря голубом как Демон.
81753. Жанровое своеобразие и идейное звучание «Слова о полку Игореве» Связь «Слова…» с устным народным творчеством 32.87 KB
  Определив хронологический диапазонсвоего повествования от старого Владимира до нынешнего Игоря автор рассказывает о дерзком замысле Игоря навести свои полки на Половецкую землю испити шеломом Дону. В радостных тонах рисует автор встречу Игоря и Буй Тура Всеволода восторженно характеризует удалых кметей воинов курян. И хотя описывается первая победа принесшая русским князьям богатые трофеи автор вновь возвращается к теме грозных предзнаменований грядущего поражения кровавыя зори свет поведают черные тучи с моря идут...
81754. Тема любви и смерти в прозе И.А.Бунина 31.39 KB
  Бунина на примере одного произведения Рассказы Бунина о любви это повествование о ее загадочной ускользающей природе о тайне женской души которая томится жаждой любить но никогда не полюбит. Исход любви; по Бунину всегда трагичен В повести Митина любовь героя преследует романс Рубинштейна на слова Генриха Гейне: Я из рода бедных Азров Полюбив мы умираем. МуромцеваБунин а в книге Жизнь Бунина пишет о том что долгие годы Бунин носил в себе впечатление от этого романса который услышал в юношеском возрасте и в Митиной любви...
81755. Мотив дороги и его философское звучание в произведениях отечественной классики 19 века 31.76 KB
  Выражением концепции исторического пути народа или государства Н. Бричка Чичикова символ однообразного кружения сбившейся с прямого пути души русского человека. А проселочные дороги по которым эта бричка колесит не только реалистическая картина российского бездорожья но и символ кривого пути национального развития. Птицатройка символ национальной стихии русской жизни символ великого пути России в мировом масштабе.
81756. Проблема ума в комедии А.С.Грибоедова «Горе от ума». Особенности языка и стиха пьесы 36.33 KB
  В комедии Горе от ума кто умное действующее лицо ответ: Грибоедов А знаешь ли что такое Чацкий Пылкий благородный и добрый малый проведший несколько времени с очень умным человеком именно с Грибоедовым и напитавшийся его мыслями остротами и сатирическими замечаниями. Но Чацкий не только умнее всех прочих лиц но и положительно умен. Между тем Чацкий как личность несравненно выше и умнее Онегина и лермонтовского Печорина. Ими заканчивается их время а Чацкий начинает новый век и в этом все его значение и весь ум.
81757. Герои и проблематика одного из произведений А. И. Куприна 38.21 KB
  Куприна. Куприн пишет на эту тему повесть Олеся. Куприн наделяет ее ярким характером. Поэтизируя жизнь не ограниченную современными социальными культурными рамками Куприн стремился показать явные преимущества естественного человека в котором он видел духовные качества утраченные в цивилизованном обществе.
81758. Тема города и деревни в произведениях отечественной литературы 35.02 KB
  В рассказе от образов Матрены и ее односельчан автор переходит к изображению картины русской деревни которая предстает перед нами серой бесприютной опустошенной. Пьянство сплетни и постоянное стремление урвать кусок побольше и получше делают жителей деревни равнодушными ко всему что не касается материальной стороны их жалкой жизни и грозят привести к тому что обнищавшее село вотвот рухнет развалится. является Матрена одинокая хозяйка дома где снимает комнату герой рассказа женщина с интересной но невероятно сложной и несчастливой...
81759. Развитие лицейской темы в лирике А.С.Пушкина. (на примере 3 – 4 стихотворений). Разбор одного стихотворения 32.7 KB
  Творческая жизнь Пушкина начинается в годы национальнопатриотического подъема вызванного войной 1812г. Другим явлением определившим духовное и нравственное развитие Пушкина было начавшееся еще в годы его пребывания в Лицее освободительное движение в среде дворянской молодежи в дальнейшем движение декабристов. Уже в Лицее Пушкин приобщается к вольнолюбивым идеям которые находили благодатную почву среди лицеистов. На развитие Пушкина большое влияние оказали произведения Радищева сочинения французских просветителей ХУШ века.
81760. Проблема добра и зла в прозе Л. Андреева ( на примере одного произведения 30.42 KB
  Образы и мотивы Нового завета проблему отношений идеала и действительности героя и толпы истинной и неистинной любви Андреев разработал и в рассказе Иуда Искариот 1907. Иуда верит Христу но сознает что он как идеал не будет понят человечеством. Предатель предстает у Андреева фигурой глубоко трагической: Иуда хочет чтобы люди уверовали в Христа но для этого толпе нужно чудо воскресение после мученической смерти. В трактовке Андреева предавая и принимая на себя навеки имя предателя Иуда спасает дело Христа.