Второй позиционированный текст
Рис. 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>При относительном позиционировании блока надо задать свойство <i>position:relative
</i> и свойства смещения.
Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а
относительно самого блока в нормальном потоке. Это будет понятнее на примере. Пусть у нас есть html-страница с тремя div-ами:
</p><p>Относительное позиционирование</p><p>Давайте зададим в таблице стилей размеры и границы этих блоков:
</p><p>#blok1, #blok2, #blok3 {
border:1px solid red;
width:150px;
height:50px;
}</p><p>Сейчас наша страница в браузере выглядит так:
</p><p>Теперь давайте изменим положение второго блока, для этого добавим в страницу стилей правило:
</p><p>#blok1, #blok2, #blok3 {
border:1px solid red;
width:150px;
height:50px;
}
#blok2{
position:relative;
left:50px;
top:25px;
}</p><p>Теперь наша страница выглядит так:
</p><p><img src='https://i1.wp.com/site-do.ru/images/css49.gif' height="182" width="223" loading=lazy></p><p>Наш второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке.
Остальные же блоки остались на своих местах.
Практически относительное позиционирование применяется достаточно редко, поэтому мы не будем больше уделять этому внимание и
рассмотрим плавающие блоки.</p><p><i>Плавающие блоки
</i></p><p>Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень
распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.</p><p>Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра
<i>align
</i>. </p><p>Плавающие блоки определяются свойством <i>float
</i>, который определяет будет ли блок плавающим и в какую сторону
он будет перемещаться. Возможны три варианта:</p><ul><li><i>left
</i> - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.</li><br><li><i>right
</i> - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.</li><br><li><i>none
</i> - блок не перемещается и позиционируется согласно свойству <i>position
</i>.</li></ul>
Давайте посмотрим на примере. Пусть у нас есть html-страница со следующим кодом:
<p>Позиционирование блоков
</p><p>Текст блока 1</p><p>И страница style.css со следующим кодом:
</p><p>#blok1{
border:1px solid red;
width:150px;
height:50px;
}</p><p>Сейчас наша страница в браузере выглядит так:</p><p>Давайте сделаем наш блок плавающим и прижмем его к левому краю:
</p><p>#blok1{
border:1px solid red;
width:150px;
height:50px;
float:left;
}</p><p>Теперь давайте прижмем блок к правому краю:
</p><p>#blok1{
border:1px solid red;
width:150px;
height:50px;
float:right;
}</p><p>Теперь наша страница в браузере выглядит так:
</p><p>А что будет, если плавающих блоков на странице несколько? Давайте добавим в нашу html-страницу еще один блок:
</p><p>Позиционирование блоков
</p><p>Текст блока 1</p>
<p>Текст блока 2</p><p>Просто какие-то элементы на странице. Это может быть просто
текст, ссылки, списки, картинки и т.д.</p><p>И зададим им разные значения свойства <i>float
</i>:
</p><p>#blok1{
border:1px solid red;
width:150px;
height:50px;
float:left;
}
#blok2{
border:1px solid red;
width:150px;
height:50px;
float:right;
}</p><p>Теперь наша страница в браузере выглядит так:</p><p>А если у них будут одинаковые значения? Например:
</p><p>#blok1{
border:1px solid red;
width:150px;
height:50px;
float:left;
}
#blok2{
border:1px solid red;
width:150px;
height:50px;
float:left;
}</p><p>Тогда второй блок прижмется к правому краю первого блока:</p><p>Аналогична будет ситуация при одинаковых значениях <i>right
</i>:
</p><p>#blok1{
border:1px solid red;
width:150px;
height:50px;
float:right;
}
#blok2{
border:1px solid red;
width:150px;
height:50px;
float:right;
}</p><p>Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2.</p><p>А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует
свойство <i>clear
</i>, которое определяет, какие стороны плавающего блока не могут соседствовать с другими
плавающими блоками. У этог свойства может быть задано одно из четырех значений:
</p><ul><li><i>left
</i> - блок должен располагаться ниже всех левосторонних блоков.</li><br><li><i>right
</i> - блок должен располагаться ниже всех правосторонних блоков.</li><br><li><i>both
</i> - блок должен располагаться ниже всех плавающих блоков.</li><br><li><i>none
</i> - никаких ограничений нет, это значение по умолчанию.</li><br></ul>
Давайте в нашем последнем примере зададим это свойство для второго блока:
<p>#blok1{
border:1px solid red;
width:150px;
height:50px;
float:right;
}
#blok2{
border:1px solid red;
width:150px;
height:50px;
float:right;
clear:right;
}</p><p>Теперь получилось так, как и хотелось: один блок под другим:</p><p><img src='https://i2.wp.com/site-do.ru/images/css56.gif' width="100%" loading=lazy></p><p>В предыдущем уроке, мы с вами с помощью абсолютного позиционирования делали вот такую страницу:</p><p><img src='https://i1.wp.com/site-do.ru/images/css47.gif' width="100%" loading=lazy></p><p>Давайте посмотрим, как ее можно сделать с помощью плавающих блоков. Итак, код самой страницы следующий:
</p><p>Позиционирование блоков
</p><p>шапка сайта</p>
<p>Контент
</p><p>блок новостей</p>
<p>низ сайта</p><p>На странице style.css зададим сначала размеры и фон для наших блоков:
</p><p>#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;
}</p><p>Сейчас наши блоки располагаются в нормальном потоке, т.е. один под другим.
Нам надо сделать блоки <i>menu
</i> и <i>content
</i> плавающими и левосторонними. А блок
<i>news
</i> должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком:
</p><p>#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;
}</p><p>Наша страница в браузере выглядит так:</p><p><img src='https://i0.wp.com/site-do.ru/images/css57.gif' width="100%" loading=lazy></p><p>Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке <i>content
</i>. А ведь мы хотели,
чтобы блок новостей был справа, а текст обтекал бы его слева. </p><p>Почему же у нас так не получилось? Потому что наш
блок <i>news
</i> в html-коде располагается ниже текста и его будет обтекать только тот текст, который расположен
ниже его. Чтобы исправить это надо поместить наш <i>div="news"
</i> выше текста (т.е. до слова "контент"):
</p><p>Позиционирование блоков
</p><p>шапка сайта</p>
<p>блок новостей</p><p>Контент</p>
<p>низ сайта</p><p>Вот теперь наш блок новостей находится на своем месте:</p><p><img src='https://i0.wp.com/site-do.ru/images/css58.gif' width="100%" loading=lazy></p><p>А чтобы он не прижимался вплотную к верхнему и правому краям, мы добавим для этого блока значение полей:
</p><p>#news{
background:yellow;
width:150px;
height:280px;
float:right;
margin:10px;
}</p><p>Теперь мы добились такого же резельтата, как и при абсолютном позиционировании.</p><p><img src='https://i1.wp.com/site-do.ru/images/css47.gif' width="100%" loading=lazy></p><p>Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же
при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не
нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).</p><p><i>Фиксированные блоки
</i></p><p>Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра.
В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.</p><p>У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать
их пока не следует. Поэтому здесь мы лишь укажем синтаксис такого правила, если хотите попробуйте сами (например, в браузере Opera).
</p><p>#blok{
position:fixed;
left:0px;
top:0px;
}</p><p>Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.</p><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://i1.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://i1.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>Представьте себе, что веб-разработчику совсем не нужно думать о том, как будет выглядеть визуально готовая страница. Он просто пишет код, элементы сами выстраиваются на странице, сверху вниз (блочные) и слева направо (строчные). Чем выше по документу написан код, тем выше он будет отображаться на странице.</p>
<p>Вообщем-то, мы увидим естественное поведение элементов, а порядок их отображения на странице – потоком документа. Но нас совсем не устраивает такой порядок, мы хотим логотип разместить в левом верхнем углу, а кнопку чуть правее. Нам нужен полный контроль над всеми элементами, мы решаем, где и что будет находиться. А для этого нужен инструмент (свойство), меняющее обычное поведение элементов в потоке. Что же это за свойство?</p>
<p>В <b>CSS
</b> стилях это называется позиционированием <b>(position)
</b>, которое может быть обычным <b>(static)
</b>, относительным <b>(relative)
</b> и абсолютным <b>(absolute)
</b>.</p>
<h2>Относительное позиционирование в CSS</h2>
<p>При <b>относительном позиционировании
</b>, блок перемещается относительно своего исходного положения. Однако прописав блоку:</p><p>Position: relative;
</p><p>ничего не произойдет, он останется на месте. А перемещает блок система координат <b>(top, bottom, left, right)
</b>, как с положительными, так и отрицательными значениями.</p>
<h2>Как это работает?</h2>
<p>Внутри желтого блока с классом <b>block-yellow
</b> находится красный блок с классом <b>block-relative
</b>. В обычном потоке, красный блок перекрывает желтый, так как он в коде прописан последним.</p><p>
<div class="block-yellow">исходная позиция<br>
<div class="block-relative">относительная позиция- relative</div><br>
</div>
</p><p>Нам надо сдвинуть красный блок вниз на 10 пикселей. Сделать это можно, только насильственно поменяв позицию красного блока. Мы так и пишем <b>top: 10px
</b>, но надо указать, от чего отсчитывать эти 10 пикселей?</p>
<p>Прописав <b>position: relative
</b>, мы ясно даем понять, что отсчитывать относительно его текущего положения.</p><p>Block-yellow {<br>
background-color: #ffe70f;<br>
}</p><p>Block-relative {<br>
position: relative;<br>
top: 10px;<br>
background-color: #ed5b77;<br>
}
</p><p>На картинке мы видим, как красный блок сдвинулся вниз, на 10 пикселей вниз, от своего первоначального положения.</p>
<p><img src='https://i0.wp.com/myrusakov.ru/images/articles/css3_position_01.jpg' width="100%" loading=lazy></p>
<p>Если убрать из кода <b>position: relative
</b>, то блок останется на месте. А если вместо <b>relative
</b>, написать <b>absolute
</b>, то по умолчанию отсчет этих 10 пикселей будет вестись от края окна браузера и в итоге наш блок наоборот поднимется вверх, подтягиваясь к нижней кромке браузера. А это в наши планы не входило.</p>
<h2>Абсолютное позиционирование в CSS</h2><p><img src='https://i0.wp.com/myrusakov.ru/images/articles/css3_position_02.jpg' height="133" width="296" loading=lazy></p>
<p>На картинке блок <b>позиционирован абсолютно
</b>, это когда отсчет системы координат ведется от края браузера, заменив всего одно слово, мы поменяли положение блока.</p><p>Position: absolute;
</p><p>Есть одна особенность. <b>Абсолютное позиционирование
</b> оказывает влияние и на строчные элементы. Если строчному элементу задать <b>position: absolute
</b>, то он станет вести себя как блочный. Это аналог свойству - <b>display: block
</b>.</p>
<p>Это ещё не всё, "абсолютный" элемент, находящийся внутри "относительного" родителя, меняет свою точку отсчета координат и начинает позиционироваться от родителя.</p><p>
<div class="block-yellow"><br>
position: relative<br>
<div class="block-absolute"><br>
position: absolute;<br>
</div><br>
</div>
</p><p>Блок с классом <b>block-absolute
</b> находиться внутри родителя <b>block-yellow
</b>.</p><p>Block-yellow {<br>
position: relative;<br>
padding: 10px;<br>
background-color: #ffe70f;<br>
}
</p><p>Поскольку желтый блок имеет <b>относительное позиционирование
</b>, то красный блок с <b>абсолютным позиционированием
</b>, сдвигается относительно красного на заданные пиксели.</p><p>Block-absolute {<br>
position: absolute;<br>
bottom: 10px;<br>
left: 10px;<br>
background-color: #ed5b77;<br>
}
<br></p><p><img src='https://i0.wp.com/myrusakov.ru/images/articles/css3_position_03.jpg' height="160" width="318" loading=lazy></p>
<h2>Фиксированное позиционирование</h2>
<p>При прокручивании страницы блок с <b>position: fixed
</b>, будет оставаться на месте, обычно такой метод применяют для закрепления навигационной панели.</p>
<h2>z-index</h2>
<p>Разруливает порядок перекрытия "абсолютных" блоков. Нам надо, чтобы красный блок был сверху желтого, тогда мы указываем <b>z-index:
</b> 2 для красного и <b>z-index:
</b> 1 для желтого.</p><p>
<div class="block-yellow">Красный</div><br>
<div class="block-red">Желтый</div></p><p>Block-red {<br>
position: relative;<br>
z-index: 2;<br>
background-color: #ffe70f;<br>
}</p><p>Block-yelow {<br>
position: absolute;<br>
top: 20px;<br>
z-index: 1;<br>
background-color: #ed5b77;<br>
}
<br></p><p><img src='https://i0.wp.com/myrusakov.ru/images/articles/css3_position_04.jpg' height="241" width="250" loading=lazy></p>
<p>Они работают со всеми позиционированными элементами, кроме статических.</p>
<p>Пример позиционирования.</p>
<h2>Элементы могут перекрывать друг друга!</h2>
<h2>Отображение элемента над остальными!</h2>
<p>Свойство position имеет 4 значения: static , fixed , relative и absolute . Каждое из этих значений будет продемонстрировано ниже с примером использования.</p>
<p>Перед тем как подробно разобрать все виды позиционирования элементов на странице, нам придется рассмотреть, что такое поток документа.</p>
<h2>Поток документа</h2>
<p>По умолчанию элементы на веб-странице отображаются в том порядке, в котором они представлены в HTML-документе, т. е. блочные элементы занимают всю доступную для них ширину и укладываются вертикально один под другим. Строчные элементы выстраиваются по горизонтали до тех пор, пока не будет занята вся доступная ширина, после того как вся ширина будет занята, будет сделан перенос строки и всё пойдет по новой. Такой порядок расположения элементов называется <span>нормальным потоком
</span> (его также называют <span>потоком документа
</span> или общим потоком
).</p>
<p>С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент "выпадает" из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.</p>
<h2>Статическое позиционирование</h2>
<p>Статическим называют позиционирование, заданное по умолчанию для всех элементов на веб-странице. Если к элементу не применять свойство position , то он будет статическим и будет отображаться на веб-странице согласно общему потоку элементов.</p>
<p>При применении CSS свойств top , left , right или bottom к статически позиционированному элементу, они будут игнорироваться.</p>
<p>Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static:</p><p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа
Первый абзац.
Второй абзац.
Попробовать »
Фиксированное позиционирование
Элементы с фиксированным позиционированием располагаются на странице относительно окна браузера. Такие элементы удаляются из общего потока, элементы, следующие в потоке за фиксированным элементом, будут игнорировать его, смещаясь и занимая его место на веб-странице.
Стоит обратить внимание на то, что элементы с фиксированным позиционирование могут перекрывать другие элементы, скрывая их полностью или частично. При прокрутке длинных страниц, они создают эффект неподвижных объектов, оставаясь на одном и том же месте:
Название документа
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Какой-то текст
Текст
Текст
Текст
Текст
Текст
Попробовать »
Относительное позиционирование
Элементы с относительным позиционированием, как и статические элементы, остаются в общем потоке. При применении свойств top , left , right или bottom к относительно позиционированным элементам, они будут смещаться относительно своего местоположения, оставляя пустое пространство там, где элемент располагался изначально.
Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:
Название документа
Заголовок первого уровня.
Относительно позиционированный заголовок.
Заголовок третьего уровня.
Попробовать »
Примечание:
элементы с относительным позиционированием (relative) обычно используют в качестве родителя для элементов с абсолютным позиционированием (absolute).
Абсолютное позиционирование
Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .
Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute , fixed или relative .
Название документа
Изменим расположение логотипа с помощью абсолютного позиционирования.
Теперь логотип будет располагаться в правом верхнем углу страницы.
Попробовать »
Перекрывающие элементы
Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index , чем больше его значение, тем выше будет элемент.
Название документа
z-index: 1;
z-index: 0;
z-index: 2;
