Css смещение элемента. Позиционирование
Выше мы говорили о том, что позиционировать элементы страницы можно
путем использования таблиц. Но это же можно делать и с помощью стилей.
Среди параметров стиля имеются специальные свойства для позиционирования:
- 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>Необычное расположение!</p>
<h2>Решите, какой элемент отображать спереди!</h2>
<h2>Элементы могут перекрываться!</h2>
<h2>Позиционирование</h2><p>CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади
другого, и указать, что должно произойти, когда содержимое элемента слишком большое.</p>
<p>Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа).
Однако, эти свойства не будут работать, пока не установлено свойство position.
Также они работают по-разному, в зависимости от метода позиционирования.</p>
<p>Существует четыре различных метода позиционирования.</p>
<h2>Статическое Позиционирование</h2><p>HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент
всегда располагается в соответствии со стандартным потоком элементов на странице.</p>
<p>Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и
right.</p>
<h2>Фиксированное Позиционирование</h2><p>Элемент с фиксированным положением позиционирован относительно окна браузера.</p>
<p>Он не будет двигаться, даже если окно прокручивается:</p>
<p><b>Замечание:
</b> IE7 и IE8 поддерживают значение fixed только если указан тип документа!DOCTYPE.</p>
<p>Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы
ведут себя так, будто фиксированно расположенный элемент не существует.</p>
<p>Зафиксированные элементы могут перекрывать другие элементы.</p>
<h2>Относительное Позиционирование</h2><p>Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.</p>
<p>Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных
элементов.</p>
<h2>Абсолютное Позиционирование</h2><p>Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который
позиционирован иначе, чем статически.
Если такого элемента не найдено, за родительский элемент принимается <html>:</p>
<p>Абсолютно позиционированные элементы удаляются из стандартного потока элементов.
Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.</p>
<p>Абсолютно расположенные элементы могут перекрывать другие элементы.</p>
<h2>Перекрытие Элементов</h2><p>Когда элементы расположены вне стандартного потока, они могут перекрывать другие элементы.</p>
<p>Свойство z-index указывает вертикальный порядок элемента (какой элемент должен быть помещен спереди, или сзади других элементов).</p>
<p>Элемент может иметь положительный или отрицательный вертикальный порядок:</p>
<p>Элемент с большим вертикальным порядком всегда находится впереди элементы с меньшим вертикальным порядком.</p>
<p><b>Замечание:
</b> Если два позиционированных элементы перекрываются и не указан вертикальный порядок,
элемент расположенный позже в HTML коде будет показан сверху.</p>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" width="48">
</td>
<td align="left" valign="middle"><h3>Еще примеры</h3>
</td>
</tr></table><p>Установка формы элемента <br>
Этот пример демонстрирует как задать форму элемента. Элемент обрезается по этой форме, а затем отображается.</p>
<p>Как показать переполненный элемент, используя прокрутку <br>
Этот пример демонстрирует как установить свойство overflow, чтобы создать полосу прокрутки, когда содержимое
элемента слишком большое, чтобы уместиться в указанной области.</p>
<p>Как заставить браузер автоматически управлять переполнением <br>
Этот пример демонстрирует как заставить браузер автоматически управлять переполнением.</p>
<p>Изменение курсора <br>
Этот пример демонстрирует как изменить курсор.</p>
<h2>Все CSS Свойства Позиционирования</h2><p>Число в столбце "CSS" указывает, в какой версии CSS
определено свойство (CSS1 или CSS2).</p>
<table class="reference" cellspacing="0" cellpadding="0" border="1" width="100%" id="table3"><tr><th width="25%" align="left">Свойство
</th>
<th width="43%" align="left">Описание
</th>
<th width="27%" align="left">Значения
</th>
<th width="5%" align="left">CSS
</th>
</tr><tr><td></td></tr></table>
<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>Представьте себе, что веб-разработчику совсем не нужно думать о том, как будет выглядеть визуально готовая страница. Он просто пишет код, элементы сами выстраиваются на странице, сверху вниз (блочные) и слева направо (строчные). Чем выше по документу написан код, тем выше он будет отображаться на странице.</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://i1.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://i2.wp.com/myrusakov.ru/images/articles/css3_position_04.jpg' height="241" width="250" loading=lazy></p>
<p>Вы все еще не понимаете как работает абсолютное позиционирование в CSS и теряете элементы на экране? Давайте разбираться в этой магии.</p>
<h2>Введение в позиционирование</h2>
<h6>Когда вы устанавливаете position: absolute , на первый план выходит не сам элемент, а его родительский контейнер, ведь относительно него и осуществляется позиционирование в CSS. Сложность в том, что это не всегда непосредственный родитель элемента.</h6>
<p>Рассмотрим код с четырьмя дивами, вложенными друг в друга по принципу матрешки.</p>
<p><body>
<div class="box-1">
<div class="box-2">
<div class="box-3">
<div class="box-4"></div>
</div>
</div>
</div>
</body></p>
<table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td>
<td class="crayon-code"><p><
body
>
</p><p><
div
class
=
"box-1"
>
</p><p><
div
class
=
"box-2"
>
</p><p><
div
class
=
"box-3"
>
</p><p><
div
class
=
"box-4"
>
<
/
div
>
</p><p><
/
div
>
</p><p><
/
div
>
</p><p><
/
div
>
</p><p><
/
body
>
</p>
</td>
</tr></table><p>Блоки box-1 , box-2 и box-3 для красоты отцентрированы с помощью свойств margin: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.</p>
<p>body {
display: flex;
}
.box-1,
.box-2,
.box-3 {
display: flex;
margin: auto;
}</p>
<table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td>
<td class="crayon-code"><p>body
{
</p><p>Display
:
flex
;
</p><p>Box-1,
</p><p>Box-2,
</p><p>Box-3
{
</p><p>Display
:
flex
;
</p><p>Margin
:
auto
;
</p>
</td>
</tr></table><p>Все 4 элемента имеют позиционирование по умолчанию. На данный момент верстка выглядит следующим образом:</p>
<br><img src='https://i2.wp.com/proglib.io/wp-content/uploads/2018/11/1.jpeg' width="100%" loading=lazy> .box-4 без позиционирования
<h2>Относительно чего позиционируем?</h2>
<p>Чтобы спозиционировать себя, элемент должен знать две вещи:</p>
<ul><li>какой родитель станет точкой отсчета;</li>
<li>величину смещения относительно точки отсчета (сверху, снизу, справа или слева).</li>
</ul><p>Если определить position: absolute для box-4 , этот элемент покинет нормальный поток документа . Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).</p>
<br><img src='https://i2.wp.com/proglib.io/wp-content/uploads/2018/11/2.jpeg' width="100%" loading=lazy> .box-4 с абсолютным позиционированием без смещения
<p>Теперь добавим свойства top: 0 и left: 0 . Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative). box-4 начинает поочередно опрашивать своих предков. Ни box-3 , ни box-2 , ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию (unset).</p>
<p>Если позиционированный предок не нашелся, элемент размещается относительно тела документа (body):</p>
<br><img src='https://i1.wp.com/proglib.io/wp-content/uploads/2018/11/3.jpeg' width="100%" loading=lazy> .box-4 с абсолютным позиционированием. Родительские элементы без позиционирования
<p>Если установить position: relative для элемента box-1 , точкой отсчета станет он:</p>
<br><img src='https://i1.wp.com/proglib.io/wp-content/uploads/2018/11/4.jpeg' width="100%" loading=lazy> .box-4 с абсолютным позиционированием. .box-1 с относительным позиционированием
<p>Абсолютно позиционированный элемент располагается относительно ближайшего позиционированного предка.</p>
<p>Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.</p>
<p>Если установить position: relative также для box-2 , то box-4 будет позиционироваться относительно него, ведь этот предок ближе.</p>
<br><img src='https://i2.wp.com/proglib.io/wp-content/uploads/2018/11/5.jpeg' width="100%" loading=lazy> .box-4 с абсолютным позиционированием. .box-2 с относительным позиционированием
<p>Аналогично и для контейнера box-3:
</p>
<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 class="col-sm-4">
<aside>
<p class="h2 bold">
Реклама
</p>
<div class="line"></div>
<div id="vagize2" style="height:500px;width:300px;" align="center"></div>
<div class="subscribe block">
<p class="h2 bold">
Подпишитесь на новости
</p>
<div class="line"></div>
<form class="form-horizontal form" action="/" method="post" target="popupwindow">
<div class="group">
<div class="input">
<input type="text" name="subscribe_email" class="form-control" placeholder="Введите e-mail" />
<div class="helper"></div>
</div>
</div>
<div class="group">
<input type="submit" class="btn btn-base btn-big" value="Подписаться на новости" />
</div>
</form>
</div>
<div class="adv block">
<div class="adv_track" data-id="aside">
<div class="adv_block adsense_3">
</div>
</div>
</div>
</aside>
</div>
</div>
</article>
<script type='text/javascript' src='https://erfa.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.0.3'></script>
<script type='text/javascript' src='https://erfa.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript' src='https://erfa.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.0.2'></script>
<script type='text/javascript' src='https://erfa.ru/wp-content/plugins/light/js/jquery.fancybox.pack.js?ver=4.3.14'></script>
<script type='text/javascript' src='https://erfa.ru/wp-content/plugins/light/js/light.js?ver=4.3.14'></script>
<footer>
<div class="footer">
<div class="row">
<div class="menu">
<nav class="navbar navbar-moto-footer">
<div class="row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bottom_menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bottom_menu">
<ul id="menu-footer" class="nav navbar-nav navbar-first">
<li><a href="/category/ntv-plus/">НТВ плюс</a></li>
<li><a href="/category/tricolor/">Триколор</a></li>
<li><a href="/category/smart-tv/">Смарт ТВ</a></li>
<li><a href="/category/tv/">Телевизор</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="to_top">
<div class="top_btn">
<i class="fa fa-angle-up"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
© 2024 <span class="bold">erfa.ru</span> - Все о телевидении.
</div>
<div class="col-sm-6 text-right social_block" itemscope itemtype="http://schema.org/Organization">
<link itemprop="url" href="/" />
<a itemprop="sameAs" href="https://www.facebook.com/sharer/sharer.php?u=https://erfa.ru/css-smeshchenie-elementa-pozicionirovanie.html">
<i class="fa fa-facebook"></i>
</a>
<a itemprop="sameAs" href="https://vk.com/share.php?url=https://erfa.ru/css-smeshchenie-elementa-pozicionirovanie.html">
<i class="fa fa-vk"></i>
</a>
<a itemprop="sameAs" href="https://www.twitter.com/share?url=https://erfa.ru/css-smeshchenie-elementa-pozicionirovanie.html">
<i class="fa fa-twitter"></i>
</a>
<a itemprop="sameAs" href="https://connect.ok.ru/offer?url=https://erfa.ru/css-smeshchenie-elementa-pozicionirovanie.html">
<i class="fa fa-odnoklassniki"></i>
</a>
<a itemprop="sameAs" href="">
<i class="fa fa-google-plus"></i>
</a> </div>
</div>
</div>
</footer>
</div>
</div>
</div>
</body>
</html> </div>
</div>
