Поднять блок вверх

Здравствуйте! Хочу поднять блок с картинками выше, но когда задаю слишком большой margin-top то второй ряд просто начинает наезжать сверху на первый и съезжается в один ряд. Мне необходимо поднять одинаково 2 ряда вверх. Страница

0) < $resquery = mysql_fetch_array($seoquery); >If ($id != $_SESSION['countid']) < $querycount = mysql_query("SELECT count FROM table_products WHERE products_id='$id'",$link); $resultcount = mysql_fetch_array($querycount); $newcount = $resultcount["count"] + 1; $update = mysql_query ("UPDATE table_products SET count='$newcount' WHERE products_id='$id'",$link); >$_SESSION['countid'] = $id; ?>
0) < $row1 = mysql_fetch_array($result1); do < if (strlen($row1["image"]) >0 && file_exists("./uploads_images/".$row1["image"])) < $img_path = './uploads_images/'.$row1["image"]; $max_width = 300; $max_height = 300; list($width, $height) = getimagesize($img_path); $ratioh = $max_height/$height; $ratiow = $max_width/$width; $ratio = min($ratioh, $ratiow); $width = intval($ratio*$width); $height = intval($ratio*$height); >else < $img_path = "/images/no-image.png"; $width = 110; $height = 200; >echo ' 
[email protected]?v=1509391637">
[email protected]?v=1509391637">
'.$row1["title"].'
Regular price'.group_numerals($row1["price"]).' грнSale
Описание товара
 Просто лучший свитшот!

Размер'.$row1["size_s"].' '.$row1["size_m"].' '.$row1["size_l"].' '.$row1["size_xl"].' '.$row1["size_36"].' '.$row1["size_37"].' '.$row1["size_38"].' '.$row1["size_39"].' '.$row1["size_40"].' '.$row1["size_41"].' '.$row1["size_42"].' '.$row1["size_43"].' '.$row1["size_44"].' '.$row1["size_45"].'

'.$row1["title"].'
Regular price'.group_numerals($row1["price"]).' грнSale
Описание товара
 Просто лучший свитшот!

Размер'.$row1["size_s"].' '.$row1["size_m"].' '.$row1["size_l"].' '.$row1["size_xl"].' '.$row1["size_36"].' '.$row1["size_37"].' '.$row1["size_38"].' '.$row1["size_39"].' '.$row1["size_40"].' '.$row1["size_41"].' '.$row1["size_42"].' '.$row1["size_43"].' '.$row1["size_44"].' '.$row1["size_45"].'
 '; > while ($row1 = mysql_fetch_array($result1)); $result = mysql_query("SELECT * FROM uploads_images WHERE products_id='$id'",$link); If (mysql_num_rows($result) > 0) < $row = mysql_fetch_array($result); echo ' 
Доп. фото
 '; do < $img_path = './uploads_images/'.$row["image"]; $max_width = 70; $max_height = 70; list($width, $height) = getimagesize($img_path); $ratioh = $max_height/$height; $ratiow = $max_width/$width; $ratio = min($ratioh, $ratiow); $width = intval($ratio*$width); $height = intval($ratio*$height); echo ' 
 
 
 '; > while ($row = mysql_fetch_array($result)); > $result = mysql_query("SELECT * FROM table_products WHERE products_id='$id' AND visible='1'",$link); $row = mysql_fetch_array($result); $query_reviews = mysql_query("SELECT * FROM table_reviews WHERE products_id='$id' AND moderat='1' ORDER BY reviews_id DESC",$link); If (mysql_num_rows($query_reviews) > 0) < $row_reviews = mysql_fetch_array($query_reviews); do < >while ($row_reviews = mysql_fetch_array($query_reviews)); > else < >> ?>

p class="positioned">. p> 

А теперь добавьте следующее правило в конец вашего CSS:

.positioned  position: static; background: yellow; > 

И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!

Примечание: вы можете посмотреть живой пример на данном этапе на 1_static-positioning.html (см. исходный код).

Относительное позиционирование

Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление position в вашем коде:

position: relative; 

Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства top , bottom , left (en-US), и right которые мы объясним в следующем разделе.

Введение в top, bottom, left, и right

top , bottom , left (en-US), и right используются вместе с position чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу .positioned в вашем CSS:

top: 30px; left: 30px; 

Примечание: значения этих свойств могут принимать любые единицы которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.

Если вы сейчас сохраните и обновите, вы получите примерно такой результат:

h1>Relative positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: relative; background: yellow; top: 30px; left: 30px; > 

Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали top: 30px; , сила толкает блок, заставляя его перемещаться вниз на 30px.

Примечание: вы можете посмотреть пример на этом этапе на 2_relative-positioning.html (см. исходный код).

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

Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:

position: absolute; 

Если вы сохраните и обновите, то вы должны увидеть нечто подобное:

h1>Absolute positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: absolute; background: yellow; top: 30px; left: 30px; > 

В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее.

Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что top , bottom , left (en-US), и right ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха «содержащего элемента» и 30px от левого края (В этом случае «содержащий элемент» является исходным содержащим блоком. См. раздел ниже для дополнительной информации).

Примечание: вы можете использовать top , bottom , left (en-US), и right для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните.

Примечание: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.

Примечание: вы можете посмотреть пример на этом этапе на 3_absolute-positioning.html (см. исходный код).

Контекст позиционирования

Какой элемент является «содержащим» относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).

Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в исходным содержащем блоке. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент . Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента и будет расположен относительно исходного окна просмотра.

position: relative; 

Это должно дать следующий результат:

h1>Positioning contexth1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> Now I'm absolutely positioned relative to the code><body>code> element, not the code><html>code> element! p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; position: relative; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: absolute; background: yellow; top: 30px; left: 30px; > 

Позиционируемый элемент теперь располагается относительно элемента .

Примечание: вы можете посмотреть живой пример на этом этапе на 4_positioning-context.html (см. исходный код).

Введение в z-index

Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы «побеждают» не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?

Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:

p:nth-of-type(1)  position: absolute; background: lime; top: 10px; right: 30px; > 

На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом .positioned , где они оба перекрываются. Это потому что параграф .positioned является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.

Можете ли вы изменить порядок наложения? Да, можете, используя свойство z-index . «z-index» это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).

У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения z-index влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto , что фактически равно 0.

Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:

z-index: 1; 

Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:

h1>z-indexh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> Now I'm absolutely positioned relative to the code><body>code> element, not the code><html>code> element! p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; position: relative; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: absolute; background: yellow; top: 30px; left: 30px; > p:nth-of-type(1)  position: absolute; background: lime; top: 10px; right: 30px; z-index: 1; > 

Обратите внимание что z-index принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.

Примечание: вы можете посмотреть живой пример на этом этапе на 5_z-index.html (см. исходный код).

Фиксированное позиционированиее

А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), фиксированное позиционирование обычно фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его свойству transform отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.

Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.

А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:

body  width: 500px; height: 1400px; margin: 0 auto; > 

Теперь мы собираемся дать элементу (en-US) position: fixed; , а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:

h1  position: fixed; top: 0; width: 500px; margin-top: 0; background: white; padding: 10px; > 

top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.

Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:

p:nth-of-type(1)  margin-top: 60px; > 

Теперь вы должны видеть законченный пример:

h1>Fixed positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned">I'm not positioned any more. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; height: 1400px; margin: 0 auto; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > h1  position: fixed; top: 0px; width: 500px; background: white; padding: 10px; > p:nth-of-type(1)  margin-top: 60px; > 

Примечание: вы можете посмотреть живой пример на этом этапе на 6_fixed-positioning.html (см. исходный код).

position: sticky

Доступно другое значение позиции называемое position: sticky , которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.

h1>Sticky positioningh1> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> div class="positioned">Stickydiv> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> 

body  width: 500px; margin: 0 auto; > .positioned  background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; > 

.positioned  position: sticky; top: 30px; left: 30px; > 

Интересное и общее использование position: sticky заключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:

h1>Sticky positioningh1> dl> dt>Adt> dd>Appledd> dd>Antdd> dd>Altimeterdd> dd>Airplanedd> dt>Bdt> dd>Birddd> dd>Buzzarddd> dd>Beedd> dd>Bananadd> dd>Beanstalkdd> dt>Cdt> dd>Calculatordd> dd>Canedd> dd>Cameradd> dd>Cameldd> dt>Ddt> dd>Duckdd> dd>Dimedd> dd>Dipstickdd> dd>Dronedd> dt>Edt> dd>Eggdd> dd>Elephantdd> dd>Egretdd> dl> 

CSS может выглядеть как показано ниже. В нормальном потоке элементы будут прокручиваться вместе с контентом. Когда мы добавляем position: sticky к элементу , вместе со значением top 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.

dt  background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; > 

body  width: 500px; height: 1400px; margin: 0 auto; > dt  background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; > 

h1>Sticky positioningh1> dl> dt>Adt> dd>Appledd> dd>Antdd> dd>Altimeterdd> dd>Airplanedd> dt>Bdt> dd>Birddd> dd>Buzzarddd> dd>Beedd> dd>Bananadd> dd>Beanstalkdd> dt>Cdt> dd>Calculatordd> dd>Canedd> dd>Cameradd> dd>Cameldd> dt>Ddt> dd>Duckdd> dd>Dimedd> dd>Dipstickdd> dd>Dronedd> dt>Edt> dd>Eggdd> dd>Elephantdd> dd>Egretdd> dl> 

Липкие элементы являются «липкими» относительно ближайшего предка с «прокручивающимся механизмом», который определяется свойством позиции его предка.

Примечание: вы можете посмотреть живой пример на этом этапе на 7_sticky-positioning.html (см. исходный код).

Проверь свои навыки!

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Проверьте свои навыки: Позиционирование.

Заключение

Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.

Смотрите также

• Справка свойства position .
• Примеры практического позиционирования, для дополнительных полезных идей

В этом модуле

• Введение в CSS макет
• Нормальный поток
• Flexbox
• Grid
• Floats
• Позиционирование
• Макет с несколькими столбцами
• Отзывчивый дизайн
• Руководство по медиавыражениям для новичков (en-US)
• Устаревшие методы макетов (en-US)
• Поддержка старых браузеров (en-US)
• Базовая оценка понимания макета

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

How to Stack Elements in CSS

If you want to create fantastic and unique visual experiences on the web, you will eventually need two elements to overlap or exist in the same place. You may even just need them to be positioned near or next to each other. Let’s go over two different ways to accomplish this, one with the position property and one with CSS Grid.

Method 1: Using the Position Property

You may already know that position: absolute; will place something absolutely on the page wherever you want it to be. In this case, we’re absolutely positioning the child to the top-left of the page. No matter where the parent is, the child will be placed in that corner, absolutely.

.child

See the Pen
CSS Stacking, Absolute 1 by Sarah Drasner (@sdras)
on CodePen. But this is very brittle! What if you were to place something on the page and then something else comes along after it? Maybe you have an icon within a navigation that you always want in the top-left corner, but a third party comes in and puts in a banner ad. (I’m not advocating for banner ads, but they do exist.) This pushes the navigation down and now the icon is out of place. Or, let’s say you want to make a self-contained component that you can use in multiple places. You need it to be reusable and work within its own context, no matter where you use it. If we put position: relative; on the parent element, anything inside of it with position: absolute; will be placed absolutely, relative to that containing unit!

.child < /* . */ position: absolute; top: 0; left: 0; >.parent

See the Pen
CSS Stacking, Absolute 2 by Sarah Drasner (@sdras)
on CodePen. Nice. We can use this same premise if we wanted to stack two elements on top of each other. Here, we’ll have two child elements stacked on top of one another and set apart by 150 pixels. We’ll see that they’re now contained in that same parent and stay positioned inside it.

 
Parent
 
Child 1
 
 
Child 2
 
 

.child < position: absolute; top: 0; >.child-1 < left: 0; >.child-2 < left: 150px; >.parent

See the Pen
CSS Stacking, Absolute 3 by Sarah Drasner (@sdras)
on CodePen. This is a little old school, but I’ve been using it for years and I still reach for it. It works consistently across browsers and can help you achieve even the strangest and unique placements.

Method 2: Using CSS Grid

Another nice way of overlapping elements, stacking them, or modifying their placement is CSS Grid, depending on how far back you need to support (which you can check with caniuse). We can place something where we need it in the container like this:

.parent < display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 150px 1fr; >.child < grid-area: 1 / 1 / 2 / 2; >

See the Pen
CSS Stacking, Grid 1 by Sarah Drasner (@sdras)
on CodePen. And if one element should stack on the other, we can put them in the exact same grid area. Let’s also offset them slightly by using a margin.

.parent < display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 150px 1fr; >.child < grid-area: 1 / 1 / 2 / 2; >.child-2

See the Pen
CSS Stacking, Grid 2 by Sarah Drasner (@sdras)
on CodePen. If you find this technique difficult to visualize, I’ve created a CSS Grid Generator that hopefully helps see things more clearly. There are so many places to use these techniques! You can stack, layer and offset elements. You can make navigations, footers. You can create just about any type of layout where you want to have more fine-grain control of how elements are placed on a page.