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

left - для задания расстояния в пикселах от левого края окна (х-координата);
top - для задания расстояния в пикселах от верхнего края окна (у-координата);
z-index - для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.

Конечно, при использовании этих трех свойств не создается эффект трехмерного пространства, но это уже нечто большее, чем плоская поверхность. В этом случае говорят о 2,5-мерном пространстве.
Кроме свойств-координат, нам понадобится свойство роsition , которое в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна. Свойство position может принимать три значения:

absolute - заданные свойства left и top поставят элемент в точку с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент). Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тега внутри HTML-документа;
relative - элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию. Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative , а свойства координат left и top - нулевые значения. Ненулевые значения свойств left и top задают сдвиг элемента относительно исходного положения;
static - элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.

Следующий пример показывает использование свойства z-index . Хотя в тексте программы картинка описана выше остальных элементов, за счет присвоения ей индекса с большим номером происходит перемещение ее поверх первого текста. Таким образом, использование свойства z-index освобождает от пут естественного порядка упоминания элементов в тексте HTML-программы.

<НЕАD>Позиционирование

nepBbiu позиционированный текст

Рис. 666. Использование свойства i-index позволяет изменить естественный порядок следования элементов в тексте HTML-документа
При позиционировании элементов может оказаться, что размеры элемента превосходят размеры фрагмента (отводимой области, заданной в нашем примере тегом
). Например, текст или картинка не помещаются полностью в прямоугольник, выделенный для них. На этот случай имеется свойство overwlow (переполнение). Свойство overflow может иметь три значения:
nоnе (ничего) - если элемент и выйдет за пределы фрагмента (отведенного для него места), он все равно будет показан;
clip - выступающие за границы фрагмента части элемента будут обрезаны;
scroll - будет использована прокрутка.

В следующем примере используется свойство overflow для создания механизма прокрутки первого текста.

<НЕАD><ТIТLЕ>Позиционирование

riepBbiM позиционированный текст

Второй позиционированный текст

Рис. 667. Механизм прокрутки текста, реализованный с помощью свойства overflow
Конечно, неказистые страницы с предыдущих рисунков создавались лишь с целью продемонстрировать возможности языка по позиционированию элементов. Вы сами решите, какие средства и для чего будете использовать на своей Web-странице.
С помощью свойств позиционирования нетрудно создавать для надписей эффект трехмерности. Идея состоит в том, чтобы вывести одинаковые по содержанию тексты слегка сдвинутыми друг относительно друга и окрашенными в различные цвета. Попробуйте в качестве упражнения написать соответствующую программу. На рисунке показано примерно то, что должно получиться. Ниже рисунка приведен один из возможных вариантов программы, которая создает «трехмерную» надпись.
Рис. 668. Пример создания трехмерного текста с помощью CSS

3d эффект</ТITLE> <НЕАD><br> <STYLE><br> P (font-family: "sans-serif"; font-size: 96, -color: red)<br> P. highlight (color: silver }<br> P. shadow (color: darkred}<br> </STYLE> <br> <BODY BGCOLOR="#509090"><br> <DIV STYLE= "position: absolute; top: 5; left: 5;<br> width: 600; height: 100; margin: top:10"><br> <P CLASS=Shadow>Объемный текст"</Р><br> <DIV<br> STYLE="position: absolute; top: 0;left:0; width: 600; <br> height:100;margin: top: 10"> <P CLASS=highlight>Oбъeмный текст</Р><br> <DIV STYLE="position: absolute; top: 2; left: 2; width: 600;<br> height:100;margin: top: 10"><br> <P>Объемный текст </Р><br> </DIV> <br> </BODY> <br> </HTML> </i></p><p>Обратите внимание, что этот способ создания эффектных заголовков значительно экономнее, чем использование графических файлов с аналогичным содержанием.</p><table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>Блочный элемент в HTML –это такой элемент, который занимает по умолчанию всю ширину родительского элемента. Родительским элементом может быть другой блочный элемент, или окно браузера. Блочному элементу с помощью свойств CSS можно задать ширину (width) и высоту (height). Позиционированием блочных элементов называется процесс их расположения внутри окна браузера и относительного друга с помощью CSS свойств position , left , top , right и bottom . Свойство CSS position предназначено для задания одного из четырёх доступных видов позиционирования: static (по умолчанию), absolute (абсолютное), fixed (фиксированное) и relative (относительное). Остальные CSS свойства, а именно left , top , right и bottom предназначены для задания расстояний относительно левого, верхнего, правого и нижнего края родительского элемента. Также блочные элементы при задании определенных свойств могут накладываться друг друга, и данную возможность то же можно использовать на сайтах.</p> <h3>Позиционирование по умолчанию (static)</h3> <p>Если вы не указали position у блочного элемента или указали static , что одно и то же, то в таком случае блочные элементы располагаются по порядку. Причем следующий блок (например: красный) располагается с новой строки. Так же на данное позиционирование не действует задание расстояний left , top , right и bottom .</p><p> <body> <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div> <div style="width: 300px; height: 150px; border: 1px solid black; background: red;"></div> </body> </p><h3>Абсолютное позиционирование (absolute)</h3> <p>При абсолютном позиционировании положения элемента задаётся относительно краёв окна браузера с помощью расстояний, задаваемых свойствами left , top , right и bottom . Если указать расстояния left и right одновременно, и они будут противоречить между собой, то предпочтение отдаётся left , то же самое касается top и bottom , в которых больший приоритет имеет расстояние top . Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.</p><p> <body> <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div> <div style="width: 300px; height: 200px; position: absolute; top: 50px; left: 100px; border: 1px solid black; background:red;"></div> </body> <br><img src='https://i0.wp.com/itchief.ru/assets/images/tickets/2014.10/position-absolute.png' width="100%" loading=lazy></p><h3>Фиксированное позиционирование (fixed)</h3> <p>Фиксированное позиционирование отличается от других видов позиционирования и не перемещается вместе с контентом при скроллинге страницы. Блочные элементы с фиксированным позиционированием привязываются с помощью свойств left , top , right и bottom к краям окна браузера. Фиксированное позиционирование применяется для создания фреймовых интерфейсов (окно браузера делится на несколько областей), фиксированного меню, фиксированного подвала сайта и "постоянных" блоков (перечень ссылок, социальные кнопки и т.д.).</p><p> <body> <div style="width: 200px; height: 2000px; border: 1px solid black; background: green;"></div> <div style="width: 600px; height: 200px; position: fixed; top: 100px; left: 100px; border: 1px solid black; background:red;"></div> </body> <br><img src='https://i2.wp.com/itchief.ru/assets/images/tickets/2014.10/fixed_position.png' width="100%" loading=lazy></p><h3>Относительное позиционирование (relative)</h3> <p>Относительное позиционирование задаётся с помощью задания расстояний left , top , right и bottom относительно его текущего положения.</p><p> <body> <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div> <div style="width: 300px; height: 200px; position: relative; top: 50px; left: 100px; border: 1px solid black; background: red;"></div> </body> <br><img src='https://i2.wp.com/itchief.ru/assets/images/tickets/2014.10/position-relative.png' width="100%" loading=lazy></p><p>Однако такое положение блока можно создать и с помощью свойства margin (отступы).</p><p> <body> <div style="width: 200px; height: 100px; border: 1px solid black; background:green;"></div> <div style="width: 300px; height: 200px; margin-top: 50px; margin-left: 100px; border: 1px solid black; background: red;"></div> </body> </p><p>Относительное позиционирование не интересно использовать само по себе, оно в основном применяется вместе с абсолютным позиционированием.</p> <p>Рассмотрим варианты:</p> <br><img src='https://i2.wp.com/itchief.ru/assets/images/tickets/2014.10/absolute_in_relative.png' width="100%" loading=lazy> <p><i><b>От автора: </b> приветствую вас. Позиционирование css элементов является очень важной темой в сайтостроении. В этой статье я предлагаю рассмотреть его подробнее, все способы перемещения блоков по веб-странице. </i></p> <h3>Какие бывают виды</h3> <p>Если говорить о позиционировании блочных элементов, то оно задается с помощью свойства position. У него есть четыре значения и каждое заслуживает отдельного рассмотрения.</p> <h3>Абсолютное позиционирование</h3> <p>Это первый из известных видов. Задается так: position: absolute. После этого блок теряет свои привычные свойства и полностью выпадает из нормального потока. Что представляет собой этот поток? Попробуйте поставить в разметке несколько блочных элементов подряд. Как они станут? Друг за другом, и ни как иначе.</p> <p>Это нормальное поведение блоков по умолчанию. А что же происходит с блоком, которому определено абсолютное позиционирование? Он полностью выпадает из нормального потока, другие блоки просто перестают замечать его, словно его никогда не было, но при этом элемент остается на странице. Абсолютное позиционирование в css часто применяется для точной расстановки декоративных элементов, иконок и прочего оформительского добра.</p> <p>Теперь его можно перемещать с помощью свойств left, right, top и bottom. По умолчанию перемещение происходит относительно краев окна браузера, но если у родительского элемента задано position: relative, то смещение происходит относительно родительского блока.</p> <p>Block{ position: absolute; bottom: 0; right: 0; }</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>Block { </p><p>position : absolute ; </p><p>bottom : 0 ; </p><p>right : 0 ; </p> </td> </tr></table><p>Элемент будет сдвинут в нижний правый угол. Я замечаю, что часто так делают кнопку наверх – просто размещают ее абсолютно в самый угол. А вот другой пример, в котором я покажу сначала возможную разметку:</p> <p><div id = "wrapper"> <div class = "block"></div> </div></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< div id = "wrapper" > </p><p>< div class = "block" > < / div > </p><p>< / div > </p> </td> </tr></table><p>А теперь css-стили для этого фрагмента:</p> <p>#wrapper{ position: relative; } .block{ position: absolute; top: 0; right: 10px; }</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>#wrapper{ </p><p>position : relative ; </p><p>Block { </p><p>position : absolute ; </p><p>top : 0 ; </p><p>right : 10px ; </p> </td> </tr></table><p>В этом примере мы сначала родительскому контейнеру записали относительное позиционирование (relative – о нем дальше в статье), а потом для того же элемента.block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper.</p> <p><img src='https://i1.wp.com/webformyself.com/wp-content/uploads/2016/110/1.jpg' align="center" width="100%" loading=lazy></p> <h3>Относительное позиционирование css-элементов</h3> <p>Это следующий вид и он записывается так – position: relative. Координаты задаются такими же свойствами, как и при абсолютном положении. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.</p> <p>Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остается нетронутым. Такое же происходит и при относительном размещении – блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части.</p> <p>Еще важно знать, что смещение происходит не от краев окна веб-обозревателя, а от того места, где изначально стоял блок. То есть:</p> <p>Block{ position: relative; top: 10px; right: 50px; }</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>Block { </p><p>position : relative ; </p><p>top : 10px ; </p><p>right : 50px ; </p> </td> </tr></table><p>Блок подвинется на 50 пикселей вправо и на 10 влево.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2016/110/2.jpg' align="center" width="100%" loading=lazy></p> <h3>Фиксация</h3> <p>Наверняка в интернете вы не раз видели на сайтах, когда при прокрутке какой-нибудь баннер не исчезал, а продолжал находиться в вашей зоне видимости, словно приклеиваясь к одному месту. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:</p> <h3>Position:static или обычное статическое положение</h3> <p>Последний вид – статический, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию, но все-таки знать о четвертом значении нужно. Иногда с position: static записывают, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице.</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2016/110/3.jpg' align="center" width="100%" loading=lazy></p> <h3>Как сделать позиционирование блоков в css правильно?</h3> <p>Значения то мы с вами рассмотрели, но этого мало, для того чтобы закрыть для себя эту тему. Собственно, нужно понять, где и какие виды позиционирования нужно применять. С фиксированным я вам уже привел пример – его можно использовать для создания прилипающих боковых колонок, шапок или подвалов.</p> <p>Относительное позиционирование поможет, когда нужно немного сместить блок относительно его положения и при этом сохранить ему место в потоке. Также его задают блокам-родителям, чтобы использовать абсолютное перемещение для дочерних элементов.</p> <h3>Другие приемы: центровка, плавающие блоки</h3> <p>Свойство position не решает всех проблем с расстановкой блочных элементов. Как бы вы, например, создали сетку сайта с его помощью? У меня нет хороших идей. Тут на помощь приходят другие свойства.</p> <p>С помощью float в css часто делают сетки. Свойство позволяет прижать блок к левому или правому краю родителя (float: left, float: right), давая возможность нескольким блочным элементам стать в одну линию, что встречается сплошь и рядом на любых сайтах.</p> <p>Центровка делается так: блоку нужно записать определенную ширину, после чего задать свойство margin: 0 auto. Именно значение auto выровняет его по горизонтали точно по центру. Естественно, для этого он должен быть единственным в своей строке, иначе ничего не получится.</p> <p>Все перечисленные в этой статьи виды позиционирования могут пригодиться веб-разработчику. Где-то иконку нужно вставить (position: absolute), где-то, чуть-чуть подправить положение блока, оставив за ним место (position: relative), а где и виджет зафиксировать (position: fixed). В общем, знание этого свойства точно лишним не будет.</p> <p>Ну а чтобы узнавать еще больше из мира сайтостроения, обязательно подписывайтесь на наш блог и получайте новые обучающие материалы. А еще я советую вам глянуть наши , где тоже поднимается подобная тема. (позиционирование элементов)</p> <p>При создании HTML-страницы элементы позиционируются согласно положению их кода в общем коде страницы. Говоря другими словами, если код блока помещен внутрь кода ячейки таблицы, то и на странице этот блок будет внутри этой ячейки. При таком положении дел невозможно представить, как, допустим, частично наложить один элемент на другой. Однако, это возможно при помощи <i>абсолютного позиционирования элементов </i>. При этом положение элемента определяется не положением его HTML-кода в исходном коде страницы, а его координатами, заданными с помощью CSS-стилей left и top.</p> <p>Началом координат является левый верхний угол страницы, координаты элемента определяются левым верхним углом элемента. То есть, если у элемента параметры абсолютного позиционирования:</p> top : 200px ; left : 300px ; <p>то расстояние его верхнего края до верхней границы страницы равно 200 пикселей, а расстояние левого края до левой границы страницы - 300 пикселей:</p> <p>Помимо стилей left и top, элементу необходимо также задать стиль <i>position </i> со значением <i>absolute </i>, указывая, что мы хотим применить абсолютное позиционирование. Есть еще один полезный стиль <i>z-index </i>, который позволяет настроить перекрытие элементов при наложении. Элемент с абсолютным позиционированием накрывает все элементы с относительным позиционированием. Если два элемента с абсолютным позиционированием наложены друг на друга, то на передний план выталкивается тот элемент, у которого больше значение стиля z-index.</p> <p>Рассмотрим пример. Есть каркас страницы на XHTML 1.0 Transitional:</p> <span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </span> <<span>html xmlns= > </span> <<span>head > </span> <<span>title > </span>Главная страница<<span>/ title > </span> <<span>meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </span> <<span>/ head > </span> <<span>body > </span> <<span>/ body > </span> <<span>/ html > </span> <p>Разместим в ней красный квадратный блок с абсолютным позиционированием с координатами (50; 50):</p> <span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </span> <<span>html xmlns= <span>"http://www.w3.org/1999/xhtml" </span>> </span> <<span>head > </span> <<span>title > </span>Page<<span>/ title > </span> <<span>meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </span> <<span>style type = "text/css" > </span> #layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px;} <<span>/ style > </span> <<span>/ head > </span> <<span>body > </span> <<span>div id = "layer1" ></ div > </span> <<span>/ body > </span> <<span>/ html > </span> <p>Аналогично добавим зеленый и синий блок, а также сделаем так, чтобы зеленый блок перекрывал и синий, и красный, указав ему самое большее значение стиля z-index:</p> <span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </span> <<span>html xmlns= <span>"http://www.w3.org/1999/xhtml" </span>> </span> <<span>head > </span> <<span>title > </span>Page<<span>/ title > </span> <<span>meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </span> <<span>style type = "text/css" > </span> #layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px; z-index: 20;} #layer2 {width: 150px; height: 150px; background: #0f0; position: absolute; left: 100px; top: 100px; z-index: 40;} #layer3 {width: 150px; height: 150px; background: #00f; position: absolute; left: 150px; top: 150px; z-index: 30;} <<span>/ style > </span> <<span>/ head > </span> <<span>body > </span> <<span>div id = "layer1" ></ div > </span> <<span>div id = "layer2" ></ div > </span> <<span>div id = "layer3" ></ div > </span> <<span>/ body > </span> <<span>/ html > </span> <p>Результат:</p> <p><img src='https://i0.wp.com/myfirstsite.ru/images/articles/16/2.gif' height="250" width="250" loading=lazy></p> <p>В основном, абсолютное позиционирование применяется при создании различных плавающих панелей: форм, меню, баннеров, окон уведомлений, увеличенных изображений и т.п. Некоторые начинающие веб-мастера пытаются с помощью абсолютного позиционирования разместить основные элементы сайта, например, прижать к нижнему краю подвал страниц. Хотя это иногда и практикуется, но сопровождается большим количеством потенциальных трудностей, поэтому я делать этого не рекомендую.</p> <p>Чаще всего элементы с абсолютным позиционированием связанны с какими-то действиями, появляются и скрываются динамически. Чуть позже вы узнаете, как добавить интерактивности вашим страницам.</p> <p>Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах <i>position </i> и <i>float </i>.</p> <h3>1. position: static</h3> <p>По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.</p> <p>Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.</p><p> #content{ position: static; } </p><h3>2. position:relative</h3> <p>Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.</p> <p>Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:</p><p> #content{ position: relative; top: 20px; left: -40px; } </p><p><img src='https://i0.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step2.jpg' align="center" width="100%" loading=lazy></p> <p>Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.</p> <p>На данном этапе может показаться, что относительное позиционирование не так уж и полезно, но, не спешите с выводами, далее в статье, вы узнаете, для чего его можно использовать.</p> <h3>3. position: absolute</h3> <p>При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.</p> <p>Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:</p><p> #div-1a { position:absolute; top:0; right:0; width:200px; } </p><p><img src='https://i1.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step3-1.jpg' align="center" width="100%" loading=lazy></p> <p>Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.</p> <p>Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.</p> <h3>4. position: fixed</h3> <p>Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.</p><p> #div-1a { position:fixed; top:0; right:0; width:200px; } </p><p><img src='https://i0.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step4.jpg' align="center" width="100%" loading=lazy></p> <p>В IE с position: fixed не все так гладко, как бы нам хотелось, но существует <a target="_blank" href="http://www.google.com/search?hl=ru&client=opera&hs=JQ2&rls=ru&q=position+fixed+ie&aq=f&aqi=g2g-s1g4&aql=&oq=">множество способов</a> обойти эти ограничения.</p> <h3>5. position:relative + position:absolute</h3> <p>Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.</p><p> #content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } </p><p><img src='https://i0.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step5.jpg' align="center" width="100%" loading=lazy></p> <h3>6. Две колонки</h3> <p>Вооружившись знаниями из предыдущих шагов, можно попробовать сделать две колонки, с помощью относительного и абсолютного позиционирования.</p><p> #content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } </p><p><img src='https://i0.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step6.jpg' align="center" width="100%" loading=lazy></p> <p>Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.</p> <p>А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.</p> <h3>7. Две колонки с фиксированной высотой</h3> <p>Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.</p><p> #content { position:relative; height: 450px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } </p><p><img src='https://i1.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step7.jpg' align="center" width="100%" loading=lazy></p> <p>Решение не очень подходящее, поскольку мы никогда не знаем заранее, какого размера текст, будет расположен в колонках, и какой шрифт будет использован.</p> <h3>8. Float</h3> <p>Для колонок с переменной высотой, абсолютное позиционирование не подходит, поэтому давайте рассмотрим другой вариант.</p> <p>Назначив блоку float, мы максимально возможно оттолкнем его к правому (или левому) краю, а следующий за блоком текст, будет обтекать его. Обычно такой прием используется для картинок, но мы будем использовать его для более сложной задачи, поскольку это единственный инструмент, имеющийся в нашем распоряжении.</p><p> #div-1a { float:left; width:200px; } </p><p><img src='https://i1.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step8.jpg' align="center" width="100%" loading=lazy></p> <h3>9. “Плавающие” колонки</h3> <p>Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.</p><p> #div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; } </p><p><img src='https://i0.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step9.jpg' align="center" width="100%" loading=lazy></p> <p>Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.</p><p> #div-1a { float:right; width:150px; } #div-1b { float:left; width:150px; } </p><p><img src='https://i2.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step9-1.jpg' align="center" width="100%" loading=lazy></p> <p>Но теперь у нас появилась другая проблема – колонки выходят за пределы родительского контейнера, тем самым ломая всю верстку. Эта самая распространенная проблема начинающих верстальщиков, хотя решается она довольно просто.</p> <h3>10. Очистка float</h3> <p>Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.</p><p> #div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; } </p><p>Или же назначить родительскому контейнеру свойство overflow: hidden</p><p> #content { overflow:hidden; } </p><p>В любом случае, результат будет один и тот же.</p> <p><img src='https://i0.wp.com/dreamhelg.ru/wp-content/uploads/2011/02/step10.jpg' align="center" width="100%" loading=lazy></p> <h3>Заключение</h3> <p>Сегодня были рассмотрены только базовые приемы позиционирования, и самые простые примеры. Также, в помощь начинающим верстальщикам я всегда рекомендую цикл статей Ивана Сагалаева, которые в свое время мне очень помогли.</p> <br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+""+screen.height+""+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </article> </div> </div> <div id="sidebar"> <aside> <div class="inner"> <div> <div class="xyz_wrapper"> <div> </div> </div> <div> </div> </div> </div> </aside> </div> </div> </div> <script type="text/javascript" src="/assets/like.js"></script> </main> <div id="slide-menu"> <div id="slide-menu"> <div class="menu-content"> <div class="slide-menu-close" id="slide-menu-close" title="Закрыть"></div> <dblock></dblock> <ul> <li><span class="link" onclick="go('/category/beeline/')"><i class=""></i> Beeline</span></li> <li><span class="link" onclick="go('/category/internet/')"><i class=""></i> Интернет</span></li> <li><span class="link" onclick="go('/category/tele2/')"><i class=""></i> Tele2</span></li> <li><span class="link" onclick="go('/category/useful/')"><i class=""></i> Полезное</span></li> <li><span class="link" onclick="go('/category/ip-telephony/')"><i class=""></i> IP-Телефония</span></li> <li><span class="link" onclick="go('/category/iota/')"><i class=""></i> Йота</span></li> <li><span class="link" onclick="go('/category/mts/')"><i class=""></i> Mts</span></li> <li><span class="link" onclick="go('/category/megafon/')"><i class=""></i> Megafon</span></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="">Реклама</a></li> <li><a href="">О сайте</a></li> </ul> </div> </div> </div> <div id="slide-search"> <div class="search-content"> <div class="search-form-close" id="slide-search-close" title="Закрыть"></div> <div class="search-form-header"><img src="/assets/vsadu-icon-gray.svg" alt="Портал о мобильных операторах" onerror="this.src='/ui/vsadu-icon-gray.png'" style="height: 45px" loading=lazy> Поиск</div> <form style="position: relative" action="/search" method="get" autocomplete="off"> <input type="text" class="m-seach-field" name="q" placeholder="поиск по сайту" value="" /> <div> <dblock></dblock> </div> <div class="desktop_screen" style="position: absolute;right: 9px;top: 9px;"> <input type="submit" class="button yellow big" value="Найти" /> </div> </form> </div> </div> <script type="text/javascript" src="/assets/slide-menu.3.js"></script> <script type="text/javascript" src="/assets/sticky.min.js"></script> <script type="text/javascript" src="/assets/jquery.lazyload.min.js"></script> <script type="text/javascript" src="/assets/jquery-ui.min.js"></script> <script type="text/javascript" src="/assets/JsHttpRequest.js"></script> <script type="text/javascript" src="/assets/Request.js"></script> <div class="white_section"> <div> <div class="desktop_screen" style="padding: 15px 0;background:#f6f8f2;"> <dblock></dblock> </div> </div> </div> <footer> <div class="footer"> <dblock></dblock> <div class="silver_section"> <div class="content"><div class="inner"> <div class="section group" style="text-align: center"> <div class="col span_1_of_3"> <div style="font-size: 16px; vertical-align: middle; line-height: 45px;"><i class="fa fa-envelope-o"></i> cena5.ru - Портал о мобильных операторах</div> </div> <div class="col span_1_of_3"> </div> <div class="col span_1_of_3"> <a target="_blank" href="https://connect.ok.ru/offer?url=https://www.cena5.ru/pozicionirovanie-pozicionirovanie-v-css.html"><img class="soc" alt="Портал о мобильных операторах Одноклассники" src="/assets/ok.svg" onerror="this.src='/ui/icons/ok.png'" loading=lazy></a> <a target="_blank" href="https://vk.com/share.php?url=https://www.cena5.ru/pozicionirovanie-pozicionirovanie-v-css.html"><img class="soc" alt="Портал о мобильных операторах ВКонтакте" src="/assets/vk.svg" onerror="this.src='/ui/icons/vk.png'" loading=lazy></a> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.cena5.ru/pozicionirovanie-pozicionirovanie-v-css.html"><img class="soc" alt="Портал о мобильных операторах Facebook" src="/assets/fb.svg" onerror="this.src='/ui/icons/fb.png'" loading=lazy></a> <a target="_blank" href="https://www.twitter.com/share?url=https://www.cena5.ru/pozicionirovanie-pozicionirovanie-v-css.html"><img class="soc" alt="Портал о мобильных операторах Twitter" src="/assets/tw.svg" onerror="this.src='/ui/icons/tw.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Google+" src="/assets/g+.svg" onerror="this.src='/ui/icons/g+.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Pinterest" src="/assets/pin.svg" onerror="this.src='/ui/icons/pin.png'" loading=lazy></a> <div class="soc-caption">Портал о мобильных операторах в социальных сетях</div> </div> </div> </div></div> </div> <div class="content desktop_screen" style="overflow: inherit; margin-top: 20px"><div class="inner"> <div class="section group"> <div class="col span_2_of_5"> <div class="share-widget"> <script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="https://yastatic.net/share2/share.js" async="async"></script> <div class="ya-share2" data-services="collections,vkontakte,gplus,odnoklassniki,facebook,moimir,twitter,pinterest,lj,viber,whatsapp,pocket" data-url="https://cena5.ru" data-counter="true" data-limit="6"></div> </div> </div> <div class="col span_3_of_5" style="text-align: center;"> <a class="section_link" href="/feedback.html">Контакты</a> <a class="section_link" href="" style="color: #ff4500 !important;">Реклама</a> <a class="section_link" href="">Вакансии</a> <script> document.write('<a class="section_link" href="mailto:info' + '@cena5.ru">Написать нам</a>') </script> </div> </div> </div> </div> <dblock></dblock> <div class="content"> <div class="inner"> <p style="margin: 20px 0">Copyright © «cena5.ru» 2024 Копирование и видоизменение материалов сайта возможно только после письменного согласия правообладателей. <br /> Статьи защищены законом об авторских и смежных правах, при цитирование материалов проекта «cena5.ru» <span style="text-decoration: underline">прямая открытая ссылка</span> на <strong>cena5.ru</strong> обязательна. <br /> Все права защищены.</p> <dblock></dblock> </div> </div> </div> </footer> <script src="/assets/init.3.js"></script> <div class="push-popup"> <img src="/assets/vsadu-icon.png" style="float: left; margin-right: 10px; margin-bottom: 70px" / loading=lazy> Мы можем оповещать вас о новых статьях,<br /> чтобы вы всегда были в курсе самого интересного. <br /><br /> <button class="button blue uppercase push-button" style="margin-bottom: 10px">Продолжить</button> <button class="button blue-text uppercase push-cancel" style="margin-bottom: 10px">Нет, спасибо</button> </div> <script src="/assets/init.1.js"></script> <div id="p-b"> </div> <style> #yinfo-badge .yinfo-links, #yinfo-badge .yinfo-report { display: none !important } ::shadow .yinfo-links, ::shadow .yinfo-report { display: none !important } </style> <div class="page-top-button wide_desktop_screen hidden"> <div class="page-top-sec"> <a href="/" title="Главная Портал о мобильных операторах"><i class="fa fa-home gray" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a href="" title="О сайте"><i class="fa fa-calendar green" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a title="Связаться с нами" href="/feedback.html"><i class="fa fa fa-commenting-o" style="font-size: 32px; color:#ff4500"></i></a> </div> </div> </body> </html>