Поделиться Поделиться

Абсолютное позиционирование блоков

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно его блока-контейнера или относительно корневого элемента html c помощью свойства position: absolute.

Абсолютное позиционирование блоков - Инвестирование -  1

Для режима характерны следующие особенности:

  • Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.
  • Слой не меняет своё исходное положение, если у него нет свойств right, left, top и bottom.
  • Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.
  • Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top, только слой уйдёт за верхний край.
  • Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top, только речь пойдёт о вертикальной полосе прокрутки.
  • Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top, bottom и height.
  • Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.

Пример. Разместим 4 блока в углах документа:

Абсолютное позиционирование блоков - Инвестирование -  2

<HTML>

<HEAD><TITLE>Абсолютное позиционирование</TITLE>

<STYLE type="text/css">

#box1 {

position: absolute;

top: 50px;

left: 50px;

background: orange;

border: solid 2px black;

width: 60;

height:60;

}

#box2 {

position: absolute;

top: 50px;

right: 50px;

background: yellow;

border: solid 2px black;

width: 60;

height:60;

}

#box3 {

position: absolute;

bottom: 50px;

right: 50px;

background: blue;

border: solid 2px black;

width: 60;

height:60;

}

#box4 {

position: absolute;

bottom: 50px;

left: 50px;

background: green;

border: solid 2px black;

width: 60;

height:60;

}

</STYLE>

</HEAD>

<BODY>

<DIV id="box1">Блок 1 </DIV>

<DIV id="box2">Блок 2 </DIV>

<DIV id="box3">Блок 3 </DIV>

<DIV id="box4">Блок 4 </DIV>

</BODY>

</HTML>

Пример:

Абсолютное позиционирование блоков - Инвестирование -  3

<HTML>

<HEAD>

<TITLE>Абсолютное позиционирование</TITLE>

<STYLE type="text/css">

body { margin: 0; }

#content {position: absolute;}

#content {

top: 30px; /* Расстояние от верхнего края */

left: 50px; /* Расстояние от левого края */

width: 400px; height: 100px; border: 2px solid black;

background-color: #ccc;

}

</STYLE>

</HEAD>

<BODY>

<div id="content">

<h2>HTML</h2>

<P> <B>HTML</B> (от англ.<I> HyperText Markup Language </I> — «язык разметки гипертекста») — стандартный язык разметки документов воВсемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируетсябраузерами и отображается в виде документа в удобной для человека форме.

<P>

HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.

</div>

<P> Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для

использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

<P>Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на данный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.

</BODY>

</HTML>

Пример

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты.

Абсолютное позиционирование блоков - Инвестирование -  4

<HTML><HEAD><TITLE>Абсолютное позиционирование</TITLE> <STYLE type="text/css"> body { margin: 0; } #sidebar, #content {position: absolute;} #sidebar, #content {overflow: auto; padding: 10px; height: 100%;} #header { height: 80px; /* Высота слоя */ background: #FEDFC0; border-bottom: 2px solid #7B5427; } #header h1 {padding: 20px; margin: 0; } #sidebar { width: 150px; background: #ECF5E4; border-right: 1px solid #231F20; top: 82px; /* Расстояние от верхнего края */ bottom: 0; /* Расстояние снизу */ } #content { top: 82px; /* Расстояние от верхнего края */ left: 170px; /* Расстояние от левого края */ bottom: 0; right: 0; } </STYLE> </HEAD> <BODY> <div id="header"><h1 align="center">Web-технологии</h1></div> <div id="sidebar"> <p>HTML</p> <p>CSS</p> <p>JavaScript</p> <p>PHP</p> </div> <div id="content"> <h2>HTML</h2>

<P> <B>HTML</B> (от англ.<I> HyperText Markup Language </I> — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

<P>

HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.

</div></BODY></HTML>

Слой header выводится в потоке как обычно, а для слоёв sidebar и соntent установлено абсолютное позиционирование.

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

Они могут свободно перемещаться и «прижиматься» к краю своего контейнера. Плавающие блоки в CSS определяются свойством float.

Свойство float

Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения:

· left — блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.

· right— блок перемещается вправо. Остальное содержимое документа будет выводиться вдоль левой стороны блока, начиная с самого верха.

· none — блок не перемещается (значение по умолчанию).

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

Абсолютное позиционирование блоков - Инвестирование -  5 Создадим такой блок, указав для него свойство float со значением left. Для плавающих блоков всегда надо явно указывать ширину, иначе блок растянется так, чтобы поместить в себя всё содержимое.

<HTML>

<HEAD>

<TITLE>Плавающие блоки</TITLE>

<STYLE type="text/css">

.comment { background-color: #CCCCFF;

border: 1px solid;

padding: 5px;

width: 250px;

float: left

}

</STYLE>

</HEAD>

<BODY>

<DIV class="comment">

<b>Текст внутри плавающего блока</b><br> <br> Язык HTML не чувствителен к регистру. Команды языка могут набираться как прописными, так и строчными буквами, т.е. команда body эквивалентна команде BODY или Body. Если браузер не поддерживает команду, он ее просто игнорирует.

</DIV>

<P><b>Текст, который будет обтекать блок</b></P>

<p> Основное достоинство WWW состоит в создании гипертекстовых документов, и если Вас зинтересовал какой-либо пункт в таком документе, то достаточно "ткнуть" в него курсором для получения нужной информации. Также в одном документе возможно делать ссылки на другие, написанные другими авторами или даже расположенные на другом сервере. Одно из главных преимуществ WWW над другими средствами передачи и поиска информации - "многосредность". HTML расшифровывается как Hyper Text Markup Language, т.е. язык разметки гипертекста. Это стандарт, в соответствии с которым Web-документы отображаются браузерами.

</BODY>

</HTML>

Пример

Плавающие блоки float можно использовать для вывода колонок в документе. Для этого определяются необходимые колонки в HTML-коде тегами <div> (выведем три колонки шириной по 33%):

Абсолютное позиционирование блоков - Инвестирование -  6

<HTML>

<HEAD><TITLE>Плавающие блоки</TITLE>

<STYLE type="text/css">

#column1 { float:left; width: 33%;} #column2 { float:left; width: 33%;} #column3 { float:left; width: 33%;

}

</STYLE>

</HEAD>

<BODY>

<div id="column1"> <p>Это текст первой колонки . . . </p> </div> <div id="column2"> <p>Это текст второй колонки . . . </p> </div> <div id="column3"> <p>Это текст третьей колонки . . . </p> </div>

</BODY>

</HTML>

← Предыдущая страница | Следующая страница →