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

 class="navi">

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

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

Не в этом вопросе, но если у вас есть один div внутри другого div, то внутренний div может быть полностью или частично замаскирован из-за overflow: hidden использования overflow: visible вместо этого.

#container  width: 100px; height: 100px; position: relative; > #navi, #infoi  width: 100%; height: 100%; position: absolute; top: 0; left: 0; > #infoi  z-index: 10; >

 id="container">  id="navi">a   id="infoi">  src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b  

Выполнить фрагмент кода Скрыть результаты

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

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

@tonsils: инструкции alex должны дать желаемый результат, поэтому должно быть что-то еще, что вызывает проблему, которую вы описываете. Не могли бы вы предоставить нам образец кода (HTML + CSS), чтобы мы могли вам помочь?

absolute позиционируемые элементы расположены относительно их ближайшего явно позиционированного ( position:absolute|relative|fixed ) родительского элемента. просто дальнейшие разъяснения . jsfiddle.net/p5jkc8gz

В зависимости от случая это можно адаптировать. В моей ситуации мне не нужно, чтобы #navi был top: 0 left: 0, и в общем случае, если у вас есть HTML-код, он будет находиться до тех пор, пока HTML-дерево анализируется. Так что, возможно, в этом случае это определение не является необходимым.

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

TLDR; если вам нужен только код, прокрутите вниз до «Результат» .

Проблема

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

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

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

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

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

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

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

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

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

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

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

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

  Bottom  Top  

В этом примере, если два

div  position: absolute; width: 50%; height: 50%; > #bottom  top: 0; left: 0; background-color: blue; > #top  top: 25%; left: 25%; background-color: red; >

 id="bottom">Bottom   id="top">Top 

 class="wrapper">  class="navi">