Как наложить один div на другой css

Как наложить один div на другой div

Надеясь, что кто-то может помочь, но мне нужна помощь с наложением одного человека div на другого человека div .

Мой код выглядит следующим образом:

К сожалению, я не могу вложить div#infoi или img внутри первого div.navi .

Это должно быть два отдельных div , как показано на рисунке, но мне нужно знать, как я мог бы разместить div#infoi по div.navi и справа в самой стороне и по центру сверху div.navi .

Поблагодарите любую помощь в достижении этого.

7 ответов

Я бы посоветовал узнать о position: relative и дочерних элементах с position: absolute .

Принятое решение отлично работает, но у ИМО нет объяснений, почему он работает. Приведенный ниже пример сводится к основам и отделяет важный CSS от неулокального стиля CSS. В качестве бонуса я также включил подробное объяснение того, как работает позиционирование CSS.

TL;DR; если вы хотите только код, прокрутите вниз до "Результат".

Проблема

Есть два отдельных элемента: sibling, elements, и цель состоит в том, чтобы позиционировать второй элемент (с id infoi ), чтобы он отображался в предыдущем элементе (тот, у которого был class navi ). Структура HTML не может быть изменена.

Предложенное решение

Для достижения желаемого результата мы будем перемещать или позиционировать второй элемент, который мы будем называть #infoi чтобы он отображался в 1-м элементе, который мы будем называть .navi . В частности, мы хотим, чтобы #infoi располагался в верхнем правом углу .navi .

Обязательные знания CSS

CSS имеет несколько свойств для позиционирования элементов. По умолчанию все элементы имеют position: static . Это означает, что элемент будет располагаться в соответствии с его порядком в структуре HTML, за некоторыми исключениями.

Другие значения position являются relative , absolute и fixed . Установив position элемента для одного из этих 3 значений, теперь можно использовать комбинацию из следующих 4 свойств для позиционирования элемента:

  • top
  • right
  • bottom
  • left

Другими словами, установив position: absolute , мы можем добавить top: 100px чтобы поместить элемент 100px из верхней части страницы. И наоборот, если мы установим bottom: 100px элемент будет располагаться на 100px в нижней части страницы.

Здесь, где многие новички CSS теряются — position: absolute имеет систему отсчета. В приведенном выше примере, система отсчета является body элемента. position: absolute с top: 100px означает, что элемент расположен на 100px от верхней части элемента body .

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

  • position: absolute;
  • position: relative;
  • position: fixed;

Например, если элементу <div > задана position: relative , любые дочерние элементы используют <div > качестве своего контекста позиции. Если дочернему элементу задана position: absolute и top: 100px , элемент будет располагаться 100px от вершины элемента <div > , потому что <div > теперь является контекстом позиции,

Другим фактором, о котором следует знать, является порядок стека — или как элементы сложены в z-направлении. Обязательным знанием здесь является порядок стека элементов по умолчанию, определяемый обратным порядком в структуре HTML. Рассмотрим следующий пример:

В этом примере, если два элемента <div> были размещены в одном и том же месте на странице, элемент <div>Top</div> будет охватывать элемент <div>Bottom</div> . Поскольку <div>Top</div> появляется после <div>Bottom</div> в структуре HTML, он имеет более высокий порядок стекирования.

Порядок укладки может быть изменен с помощью CSS с использованием свойств z-index или order .

Мы можем игнорировать порядок укладки в этой проблеме, поскольку естественная структура HTML элементов означает, что элемент, который мы хотим отображать top приходит после другого элемента.

Итак, вернемся к проблеме — мы будем использовать контекст позиции для решения этой проблемы.

Решение

Как указано выше, наша цель — позиционировать элемент #infoi чтобы он отображался в элементе .navi . Для этого мы #infoi элементы .navi и #infoi в новый элемент <div > чтобы мы могли создать новый контекст позиции.

Затем создайте новый контекст позиции, .wrapper position: relative .

С этим новым контекстом позиции мы можем позиционировать #infoi внутри .wrapper . Сначала дайте #infoi position: absolute , позволяющую нам позиционировать #infoi абсолютно в .wrapper .

Затем добавьте top: 0 и right: 0 чтобы #infoi элемент #infoi в верхнем правом углу. Помните, поскольку элемент #infoi использует .wrapper качестве своего контекста позиции, он будет находиться в правом .wrapper элемента .wrapper .

Поскольку .wrapper — это просто контейнер для .navi , позиционирование #infoi в верхнем правом углу .wrapper дает эффект размещения в верхнем правом углу .navi .

И там у нас это, #infoi теперь находится в верхнем правом углу .navi .

Результат

Пример ниже сводится к основам и содержит некоторые минимальные стили.

Альтернативное (без обертки) решение

В случае, если мы не можем редактировать любой HTML, то есть мы не можем добавить элемент оболочки, мы все равно можем добиться желаемого эффекта.

Вместо использования position: absolute в элементе #infoi , мы будем использовать position: relative . Это позволяет нам переместить элемент #infoi из его позиции по умолчанию под элементом .navi . С position: relative мы можем использовать отрицательное top значение, чтобы переместить его из его позиции по умолчанию, а left значение 100% минус несколько пикселей, используя left: calc(100% — 52px) , чтобы расположить его рядом с правой кнопкой мыши, боковая сторона.

Как наложить один div поверх другого div

Мне нужна помощь с наложением одного отдельного div на другой индивидуальный div .

Мой код выглядит так:

К сожалению, я не могу div#infoi или img внутрь первого div.navi .

Это должно быть два отдельных div как показано, но мне нужно знать, как я могу разместить div#infoi над div.navi и с правой стороны и по центру сверху div.navi .

ОТВЕТЫ

Ответ 1
Ответ 2

Принятое решение прекрасно работает, но у IMO нет объяснения, почему оно работает. Пример ниже сводится к основам и отделяет важный CSS от несоответствующего CSS стиля. В качестве бонуса я также включил подробное объяснение того, как работает позиционирование CSS.

TL;DR; если вам нужен только код, прокрутите вниз до "Результат".

Эта проблема

Есть два отдельных элемента, родственных элемента, и цель состоит в том, чтобы расположить второй элемент (с id infoi ), чтобы он появился в предыдущем элементе (элемент с class navi ). Структура HTML не может быть изменена.

Предложенное решение

Чтобы достичь желаемого результата, мы собираемся переместить или расположить второй элемент, который мы назовем #infoi чтобы он появился в первом элементе, который мы назовем .navi . В частности, мы хотим, чтобы #infoi располагался в верхнем правом углу .navi .

CSS Позиция Требуется Знание

У CSS есть несколько свойств для позиционирования элементов. По умолчанию все элементы являются position: static . Это означает, что элемент будет располагаться в соответствии с его порядком в структуре HTML, за некоторыми исключениями.

Другие значения position являются relative , absolute и fixed . Установив position элемента в одно из этих трех значений, теперь можно использовать комбинацию следующих четырех свойств для позиционирования элемента:

  • top
  • right
  • bottom
  • left

Другими словами, установив position: absolute , мы можем добавить top: 100px чтобы расположить элемент в 100 пикселях от верхней части страницы. И наоборот, если мы установим bottom: 100px элемент будет расположен в 100 пикселях от нижней части страницы.

Здесь, где теряются многие новички CSS — position: absolute система отсчета. В приведенном выше примере системой отсчета является элемент body . position: absolute с top: 100px означает, что элемент расположен на расстоянии 100 пикселей от верхней части элемента body .

Ориентир позиции или контекст позиции можно изменить, установив position родительского элемента в любое значение, отличное от position: static . То есть мы можем создать новый контекст позиции, задав родительский элемент:

  • position: absolute;
  • position: relative;
  • position: fixed;

Например, если элементу <div > задана position: relative , любые дочерние элементы используют <div > качестве контекста позиции. Если бы дочернему элементу были заданы position: absolute и top: 100px , элемент был бы расположен в 100 пикселях от вершины элемента <div > , потому что <div > теперь является позицией контекст.

Другой фактор, о котором нужно знать, это порядок стека или то, как элементы располагаются в направлении z. Здесь необходимо знать, что порядок стеков элементов по умолчанию определяется в порядке, обратном их порядку в структуре HTML. Рассмотрим следующий пример:

В этом примере, если два элемента <div> были расположены в одном и том же месте на странице, элемент <div>Top</div> будет покрывать элемент <div>Bottom</div> . Поскольку <div>Top</div> идет после <div>Bottom</div> в структуре HTML, он имеет более высокий порядок наложения.

Ответ 3

Используя div со стилем z-index:1; и position: absolute; вы можете наложить свой div на любой другой div .

z-index определяет порядок стека divs. DIV с более высоким z-index будет появляться перед DIV с более низким z-index . Обратите внимание, что это свойство работает только с расположенными элементами.

Ответ 4

Здесь следует простое решение 100% на основе CSS. "Секрет" — использовать display: inline-block в элементе обертки. vertical-align: bottom на изображении — это взломать, чтобы преодолеть 4px дополнение, которое некоторые браузеры добавляют после элемента.

Совет. Если элемент перед оберткой является встроенным, они могут вставить вложенные. В этом случае вы можете "обернуть обертку" внутри контейнера с display: block — обычно хороший и старый div .

Ответ 5

Это то, что вам нужно:

Ответ 6

Я не большой программист и не эксперт в CSS, но я все еще использую вашу идею в своих веб-проектах. Я пробовал разные разрешения тоже:

Ответ 7

Новая спецификация Grid CSS обеспечивает гораздо более элегантное решение. Использование position: absolute может привести к проблемам наложения или масштабирования, а Grid избавит вас от грязных хаков CSS.

Самый минимальный пример Grid Overlay:

Это. Если вы не строите для Internet Explorer, ваш код, скорее всего, будет работать.

Ответ 8

Вот простой пример добавления эффекта наложения со значком загрузки поверх другого элемента div.

Техники наложения CSS

Техники наложения CSS

От автора: Есть несколько методов создания наложения: от использования абсолютно позиционированного элемента до контуров и псевдоэлементов. В этой статье мы собираемся исследовать стили каждой из методик со всеми их «за» и «против».

Дизайнерские шаблоны, набор лучших практик и методов, нацеленных на решение одной из самых распространенных «проблем» дизайна, обычно представлены в контексте дизайнерских принципов. Один из них – принцип «остаться на странице» (Stay On Page). Он базируется на том факте, что обновления страницы плохо действуют на мыслительные процессы пользователя, вызывая явление, известное как ослепление при смене, и нам нужно избегать визуальной перегрузки пользователя там, где и когда это возможно.

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

Поверхностные наложения можно применять для того, чтобы задать вопросы, представить свойства, обозначить прогресс, дать инструкции или показать информацию. Их можно активировать напрямую действиями пользователя (например, щелкнув на действие, проведя мышью над объектами) или представить веб-приложениями на различных стадиях при завершении действия. — Дизайн веб-интерфейсов

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

МЕТОД №1: АБСОЛЮТНО ПОЗИЦИОНИРОВАННЫЙ ЭЛЕМЕНТ

Первый способ создания наложения – абсолютное позиционирование на странице элемента HTML. В разметке будет пустой div, а с помощью CSS этот div абсолютно позиционируется и ему назначается болшое значение z-index для того, чтобы гарантировать, что он останется на странице поверх всех прочих элементов, кроме модального окна, открывающегося сверху этого наложения, которое получит еще более высокий z-index, чем оверлей.

Предположим, в нашу разметку уже добавлен пустой div, и ему назначен класс .overlay, а вот CSS для позиционирования этого наложения на странице:

Данный код очень прост, но при использовании этого способа нужно знать еще кое о чем.

Во-первых, убедитесь, что оверлей абсолютно позиционирован по отношению к body. Так что, если наложение, например, содержится в другом div’е и позиционирование этого другого div’а установлено на относительное, то оверлей будет позиционирован абсолютно относительно его контейнера, а не body. Поэтому вам нужно либо дать наложению возможность быть прямым подчиненным узлом body, или убедиться, что ни у одного из его дочерних элементов позиционирование не установлено на relative.

Кроме того, вам следует убедиться, что содержимое страницы растягивается до самого низа окна просмотра или ниже, потому что body увеличивается таким образом, чтобы соответствовать высоте своего содержимого (естественно, предположим, что контент не расположен абсолютно), а если содержимого недостаточно для того, чтобы растянуть высоту body до низа окна просмотра, то наложение, достигающее 100% высоты тела, так же не достигнет низа окна просмотра и, следовательно, не закроет его.

Что бы этого избежать и не беспокоиться о количестве контента на странице, а оверлей при этом закрывал бы все окно просмотра, вы должны установить высоту корневого элемента html и body. Однако помните при установке высоты элементов html и body:

Если вы назначаете элементу html высоту в 100% (100% высоты относительно окна просмотра) и назначаете body так же высоту в 100% (что высчитывается относительно коренного html), то устанавливаете высоту этих обоих элементов на 100% высоты окна просмотра, и следовательно, неважно насколько далеко простирается содержимое body, его высота остается равной высоте окна просмотра, и такой же будет высота наложения. В этом случае при прокрутке страницы вниз наложение станет прокручиваться вверх и вы увидите содержимое под ним без оверлея, как будто он обрезан.

Решение этой проблемы – установка минимальной высоты корневого элемента и body вместо установки значения высоты, что в большинстве ситуаций предпочтительнее. Установив минимальную высоту, вы гарантируете, что он станет достигать низа окна просмотра и будет увеличиваться по мере увеличения содержимого. И наконец, чтобы величина оверлея увеличивалась и растягивалась для покрытия всего контента при прокрутке страницы вы должны установить position:relative; к body для того, чтобы высота наложения растягивалась вместе с увеличением высоты тела.

Еще об этой методике следует заметить, что не следует пользоваться слишком высокими значениями z-index. Многие разработчики любят брать очень большие значения, вроде z-index: 999999; при позиционировании оверлея или любого другого элемента поверх других элементов страницы. Это не требуется. Чаще всего значения z-index равного 10, иногда даже меньше, достаточно для того, чтобы элемент на странице оставался поверх остальных. Вам лишь следует знать, что если другие элементы получают z-index, и таковые имеются, то просто установите z-index наложения больше самого высокого у прочих элементов.

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

Преимущество этого способа в том, что он поддерживается во всех основных браузерах и даже старых, вплоть до IE8.

Я поместила пример на Codepen, чтобы вы могли протестировать результат этой техники. Попробуйтезаменить min-height в html и body на height, или удалить позиционирование relative из body и посмотреть, как при прокрутке оверлей обрезается внизу.

МЕТОД №2: ЭЛЕМЕНТ С POSITION FIXED

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

Добавить комментарий

Ваш адрес email не будет опубликован.