Выше мы говорили о том, что позиционировать элементы страницы можно
путем использования таблиц. Но это же можно делать и с помощью стилей.
Среди параметров стиля имеются специальные свойства для позиционирования:
- 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>Свойство <b>position
</b> имеет следующие значения<br><input class="static" type="radio" name="odin">static <input class="relative" type="radio" name="odin">relative <input class="absolute" type="radio" name="odin">absolute <input class="fixed" type="radio" name="odin">fixed <br>
Только совместно с ним применяются свойства (искл. position: static;)<br><input class="top" type="checkbox">top <input class="bottom" type="checkbox">bottom <input class="right" type="checkbox">right <input class="left" type="checkbox">left <input class="z" type="checkbox"><br>
Одновременно могут присутствовать<br><input class="margin" type="checkbox">margin <input class="transform" type="checkbox">transform <input class="float" type="checkbox">float (искл. position: absolute; и position: fixed;)<br></p><p> <style type="text/css">
.primer {
border: 4px solid #456;
width: 200px;
background: #fff; position: fixed;
position: static;
position: relative;
position: absolute;
<span> margin: 15px -15px -15px 15px;
</span><span> -moz-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px);
</span> z-index: 100;
float: left;
top: 15px;
bottom: 15px;
right: 15px;
left: 15px;
}
</style>
<div class="primer"></div>
<style type="text/css">
.primer1 {
border: 4px solid #087e11;
width: 200px;
background: #e1e1e1;<span> z-index: 200; position: relative;
</span>
}
</style>
<div class="primer1"></div></p><p>Добавить пустой тег перед div с class="primer" - .</p><h2>Введение</h2><p>Элементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре "Морской бой". Между кораблями должны быть пустые клеточки - margin.</p><p>Для того, чтобы один элемент поместить поверх другого, нужно задать отрицательное значение для margin. Но тогда содержимое тегов будет накладываться друг на друга. С помощью свойств position и они как бы приподнимаются на уровень 2.</p><p>В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.</p><br><img src='https://i1.wp.com/4.bp.blogspot.com/-xP3KxTyDZkI/T4LFW038pUI/AAAAAAAAC3c/2qomvUmh_Qw/s400/z-index.png' width="100%" loading=lazy><h2>Статического позиционирование - position: static;</h2><p>position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.</p><p> <style type="text/css"> z-index: 3; }
.svetlyi2 { background-color: #fff; width: 250px; z-index: 2; margin: 0px -30px -30px 30px; }
.svetlyi3 { background-color: #f5f5dc; width: 250px; z-index: 1; }
</style>
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>
</p><h2>Относительное позиционирование - position: relative;</h2><p>Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.</p><p> <style type="text/css"> margin: 0px -60px -30px 60px; <b>position: relative;
</b> </style>
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>
<br></p><p>Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.</p><p> <style type="text/css">
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; <b>position: relative;
</b> }
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; <b>position: relative;
</b> }
.svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>
<br></p><p>Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.</p><p> <style type="text/css">
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; }
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; }
.svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>
<br></p><p>Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте - он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div ().<br></p><p> <style type="text/css">
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; <b>top: 30px; left: 60px; position: relative; z-index: 2;
</b> }
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; <b>position: relative; z-index: 1;
</b> }
.svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>
<br></p><p>Полная аналогия со свойством </p><p> <style type="text/css">
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; <b>transform: translate(60px, 30px); z-index: 2;
</b> }
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; <b>position: relative; z-index: 1;
</b> }
.svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>
</p><h3>Для встроенных элементов</h3><p>Встроенные элементы margin не смещает вниз и вверх (). Только top, bottom<br></p><p> <style type="text/css"> <b>top: 30px; position: relative;
</b> </style>
<div class="temnyi">
<span class="svetlyi2">Б</span><span class="svetlyi1">А</span><span class="svetlyi2">Б</span>
</div>
или<br> <style type="text/css">
.temnyi { background-color: #666; width:500px; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; <b>transform: translate(0px, 30px);
</b> }
.svetlyi2 { background-color: #fff; width: 250px; }
</style>
<div class="temnyi">
<span class="svetlyi2">Б</span><span class="svetlyi1">А</span><span class="svetlyi2">Б</span>
</div>
</p><p>Б
А
Б
</p><h2>Абсолютное и фиксированное позиционирование</h2><p>Казалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.<br></p><p> <style type="text/css">
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; <b>position: relative;
</b> }
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; <b>position: absolute;
</b> }
.svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>
</p><p>Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left. <br></p><p> <style type="text/css">
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; <b>position: relative; z-index: 2;
</b> }
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; <b>position: absolute; z-index: 1;
</b> }
.svetlyi3 { background-color: #f5f5dc; width: 250px; <b>margin-top: 20px;
</b>}
</style>
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>
</p><h2>Итоговая таблица</h2><table border="1" style="font-size: 85%; background-color: #fff5d7;"><tr style="background-color: #dbd1b2;"><td width="18%">отличительные свойства
</td> <td width="19%">position: static;
</td> <td width="24%">position: relative;<br>
transform: translate();
</td> <td width="20%">position: absolute;
</td> <td width="19%">position: fixed;
</td>
</tr><tr><td style="background-color: #f2e8c9;">наложение
</td> <td>элементы лучше не помещать друг на друга
</td> <td colspan="3">элементы имеет приоритет видимости над static. Другие значения равнозначны. Видимым будет тот, кто ниже находится в коде, либо обладает большим значением z-index
</td>
</tr><tr><td style="background-color: #f2e8c9;">точка отсчёта top, right, bottom и left
</td> <td>игнорируются
</td> <td>исходное положение элемента
</td><td>край родительского элемента
</td><td>край окна браузера
</td>
</tr><tr><td style="background-color: #f2e8c9;">элементы вокруг
</td> <td>учитывают текущее положение элемента
</td><td>учитывают исходное положение элемента
</td> <td colspan="2">игнорируют положение элемента
</td>
</tr><tr><td style="background-color: #f2e8c9;">width: 100%; это ширина
</td> <td colspan="2">элемента (для встроенного)/родительского элемента (для блочного)
</td><td>родительского элемента с position не в значении static
</td> <td>окна браузера
</td>
</tr><tr><td style="background-color: #f2e8c9;">при прокрутки страницы элемент
</td><td colspan="3">перемещается
</td> <td>"прилипает" к заданному месту окна браузера
</td>
</tr></table><p>А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.</p>
<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://i2.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://i0.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://i1.wp.com/itchief.ru/assets/images/tickets/2014.10/absolute_in_relative.png' width="100%" loading=lazy>
<p>Как вы вероятно уже знаете верстать сайт можно, используя таблицы, в этом случае страница разбивается на ячейки. А можно для этих целей использовать блоки, когда страница сайта состоит из отдельных элементов.</p>
<p>Наверное, не ошибусь, если скажу, что при этом серьезной проблемой для многих начинающих веб-мастеров является задача расположить блоки в заданном месте веб-страницы.</p>
<p>Одной из главных трудностей при верстке с помощью блоков является позиционирование (выравнивание) этих самых блоков.</p>
<h3>Немного о слоях (layers)</h3>
<p>Думаю, многие из вас слышали о таком понятии, как слой (layer). И, как правило, под слоем понимается блок, заданный тегом <div>. На самом деле все немного не так.</p>
<p>В HTML не существует слоев. Это просто метафора. Когда речь идет о слоях, то под ними понимается некий html контейнер (элемент), который может быть помещен в определенном месте веб-страницы.</p>
<p>Вторым заблуждением является отнесение к слоям только блока, заданного тегом <div>. Это тоже не верно. К ним также можно отнести параграфы (<p>), списки (<ul>) и другие элементы.</p>
<h3>А теперь о <DIV>ах.</h3>
<p>Как уже говорилось выше, задать местоположение можно любому HTML элементу. Для этого нет нужды всегда использовать тег <div>. Также использование данного тега не обязывает вас задавать ему какое-либо положение на веб-странице.</p>
<p>Смысл применения блока, заданного тегом <b><div>
</b> сводится к укрупнению. Ведь внутрь его можно поместить другие элементы (параграфы, картинки, и тд.). Таким образом получается крупный блок, с разнообразным содержимым, который значительно легче позиционировать на веб-странице, нежели каждый из элементов в отдельности.</p>
<h3>Позиционирование элементов.</h3>
<p>Существует четыре основных типа позиционирования:</p>
<p><b>1. Статическое (Static)<br>2. Абсолютное (Absolute)<br>3. Фиксированное (Fixed)<br>4. Относительное (Relative
</b>)</p>
<h4>Статическое (Static)</h4>
<p>Используется как расположение «по умолчанию». В этом случае браузер просматривает html код, разделяет его на элементы и составляет из них страницу. Получается последовательность из ряда элементов. Выводятся они в том порядке, в котором указаны в html коде.</p>
<p>Применение параметров <b>left, top, right и bottom
</b> не приводит к каким-либо результатам.</p>
<p>Необходимо помнить о статическом позиционировании, когда используется относительное расположение.</p>
<h4>Абсолютное (Absolute)</h4>
<p>С помощью абсолютного позиционирование задаются координаты левого верхнего угла блока. При этом отсчет координат происходит относительно расположения родительского элемента. Если родительским элементом является окно браузера, тогда выравнивание блока происходит относительно него. Если существует другой элемент, внутри которого расположен блок, тогда выравнивание происходит уже относительно этого элемента.</p>
<h4>Фиксированное (Fixed)</h4>
<p>Уже из названия становится ясно, что в данном случае элемент фиксируется. Он располагается в определенном месте веб-страницы и никуда не сдвигается. Подобное выравнивание часто применяется по отношению к всплывающим окнам, когда они фиксируются по центру и не смещаются при прокрутке страницы.</p>
<h4>Относительное (Relative)</h4>
<p>С этим видом позиционирования могут быть сложности. Его название не совсем удачное. Многие путают относительное и абсолютное позиционирование элементов. Может показаться, что выравнивание происходит относительно родительского элемента. А в случае с абсолютным позиционированием - относительно окна браузера. Но это не так.</p>
<p>Нужно уяснить, что расположение элемента в этом случае происходит относительно его же места в статическом положении. Это то, о чем упоминалось выше.</p>
<p>Проще говоря, вы указываете браузеру, что необходимо передвинуть элемент на столько-то пикселей, относительно того места, где он расположен по умолчанию.</p>
<p>Существует еще один сложный момент. Что произойдет, если родительский элемент имеет относительное позиционирование, а вложенный в него элемент абсолютное? В этом случае отсчет координат дочернего элемента будет производиться относительно родительского элемента, с учетом его смещения, если оно имеет место.</p>
<h3>Подведем итог.</h3>
<p>Итак, имеется свойство <b>position
</b>. Это свойство может принимать 4 значения <b>Static, Absolute, Fixed и Relative
</b>. По умолчанию идет <b>Static
</b>.</p>
<p>Когда вы указываете координаты для элемента, необходимо также сообщить браузеру, каким образом он должен эти координаты отсчитывать. Надо дать ему отправную точку.</p>
<p>Не забывайте, что при отсутствии свойства <b>position
</b> координаты учитываться не будут, блок останется на прежнем месте, в своем статическом положении.</p>
<h4><br></h4>
<h4>А теперь посмотрим, каким образом задаются координаты.</h4>
<p>Для этих целей применяются четыре вида свойств:</p>
<p><b>1. Top<br>2. Left<br>3. Right<br>4. Bottom
</b></p>
<p><b>Top
</b> - положительное значение (например, 20px) смещает блок на 20 пикселей вниз. Отрицательное значение (-20px) смещает элемент на 20 пикселей верх. Все это происходит относительно левого верхнего угла.</p>
<p><b>Left
</b> - смещение влево или вправо, в зависимости от знака. Относительно левого верхнего угла.</p>
<p><b>Right
</b>- смещение вправо и влево, смотря какой знак. Относительно правого верхнего угла.</p>
<p><b>Bottom
</b> - смещение вверх или вниз, зависит от знака. Происходит относительно левого нижнего угла.</p>
<p><b>Вот код HTML:
</b></p>
<p><head><br><link rel="stylesheet" type="text/css" href="style.css"><br></head></p>
<p><div id="1"><br> <div id="11"></div><br></div></p>
<p><div id="2"></div></p>
<p><b>А это CSS:
</b></p>
<p>#1 {<br> position:relative;<br> top:100px;<br> left:100px;<br> width:500px;<br> height:500px;<br> background-color:#CCCCCC;<br>}</p>
<p>#11 {<br> background-color:#003399;<br> position:absolute;<br> bottom: -30px;<br> right: -50px;<br> width:100px;<br> height:100px;<br>}</p>
<p>#2 {<br> background-color:#990066;<br> width:200px;<br> height:300px<br>}</p>
<p>Потренируйтесь.</p>
<p>Пока писал и сам разобрался .</p>
<p>Последнее обновление: 28.04.2016</p>
<p>CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице</p>
<p>Основным свойством, которые управляют позиционированием в CSS, является свойство position
. Это свойство может принимать
одно из следующих значений:</p>
<ul><p>static
: стандартное позиционирование элемента, значение по умолчанию</p>
<p>absolute
: элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static</p>
<p>relative
: элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель
относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для
абсолютного позиционированния вложенных в него элементов</p>
<p>fixed
: элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не
меняют положения при прокрутке</p>
</ul><p>Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).</p>
<h3>Абсолютное позиционирование</h3>
<p>Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее
свойство CSS: left (отступ от края слева), right (отступ от края справа),
top (отступ от края контейнера сверху) и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или
процентах. Необязательно задавать значения для всех четырех сторон. Как правило, устанавливают только два значения - отступ от верхнего края top и отступ от
левого края left.</p><p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Блочная верстка в HTML5
HELLO WORLD
Здесь элемент div с абсолютным позиционированием будет находиться на 100 пикселей слева от границы области просмотра и на 50 снизу.
При этом не столь важно, что после этого элемента div идут какие-то другие элементы. Данный блок div в любом случае будет позиционироваться относительно
границ области просмотра браузера.
Если элемент с абсоютным позиционированием располагается в другом контейнере, у которого в свою очередь значение свойства position
не равно static , то элемент позиционируется относительно границ контейнера:
Позиционирование в HTML5
Относительное позиционирование
Относительное позиционирование также задается с помощью значения relative
. Для указания конкретной позиции,
на которую сдвигается элемент, применяются те же свойства top, left, right, bottom:
Позиционирование в HTML5
Свойство z-index
По умолчанию при совпадении у двух элементов границ, поверх другого отображается тот элемент, который определен в разметке html последним.
Однако свойство z-index
позволяет изменить порядок следования элементов при их наложении. В качестве значения свойство принимает число. Элементы с большим значением этого
свойства будут отображаться поверх элементов с меньшим значением z-index.
Например:
Позиционирование в HTML5
Теперь добавим к стилю блока redBlock новое правило:
RedBlock{
z-index: 100;
position: absolute;
top: 20px;
left:50px;
width: 80px;
height: 80px;
background-color: red;
}
Здесь z-index равен 100. Но это необязательно должно быть число 100. Так как у второго блока z-index не определен и фактически равен нулю, то для redBlock мы можем
установить у свойства z-index любое значение больше нуля.
И теперь первый блок будет накладываться на второй, а не наоборот, как было в начале.
