Принятое решение прекрасно работает, но IMO не хватает объяснения, почему оно работает. Пример ниже сводится к основам и отделяет важный CSS от несоответствующего CSS стиля. В качестве бонуса я также включил подробное объяснение того, как работает позиционирование CSS.
TLDR; , если вам нужен только код, прокрутите вниз до Результат .
Проблема
Существует 2 отдельных элемента, родственных элемента, и цель состоит в том, чтобы расположить 2-й элемент (с id из infoi), чтобы он отображался в предыдущем элементе (элемент с class из navi ). Структура HTML не может быть изменена.
Предлагаемое решение
Чтобы достичь желаемого результата, мы собираемся переместить или расположить 2-й элемент, который мы назовем #infoi, чтобы он появился в 1-м элементе, который мы назовем .navi. В частности, мы хотим, чтобы #infoi был расположен в верхнем правом углу .navi.
Требуемая позиция CSS Знание
CSS имеет несколько свойств для позиционирования элементов. По умолчанию все элементы position: static. Это означает, что элемент будет располагаться в соответствии с его порядком в структуре HTML, за некоторыми исключениями.
Другие значения position: relative, absolute и fixed. Установив для элемента position одно из этих 3 значений, теперь можно использовать комбинацию следующих 4 свойств для позиционирования элемента:
Другими словами, установив position: absolute, мы можем добавить top: 100px, чтобы расположить элемент на 100 пикселей сверху страницы. И наоборот, если мы установим bottom: 100px, элемент будет расположен в 100 пикселях от нижней части страницы.
Вот где теряются многие новички CSS - position: absolute имеет систему координат. В приведенном выше примере системой отсчета является элемент body. position: absolute с top: 100px означает, что элемент расположен 100px сверху элемента body.
Положение системы отсчета или контекст положения можно изменить, установив position родительского элемента на любое значение, отличное от position: static. То есть мы можем создать новый контекст позиции, задав родительский элемент:
position: absolute;position: relative;position: fixed;
Например, если элемент <div class="parent"> задан position: relative, любые дочерние элементы используют <div class="parent"> в качестве контекста позиции. Если бы дочернему элементу были заданы position: absolute и top: 100px, элемент был бы позиционирован на 100px от вершины элемента <div class="parent">, потому что <div class="parent"> теперь является контекстом позиции.
Другой фактор, о котором нужно знать , это порядок стеков - или как элементы располагаются в направлении z. Здесь необходимо знать, что порядок стеков элементов по умолчанию определяется в порядке, обратном их порядку в структуре HTML. Рассмотрим следующий пример:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
В этом примере, если два элемента <div> были бы расположены в одном и том же месте на странице, элемент <div>Top</div> будет охватывать элемент <div>Bottom</div>. Поскольку <div>Top</div> идет после <div>Bottom</div> в структуре HTML, у него более высокий порядок наложения.
div {
position: absolute;
width: 50%;
height: 50%;
}
#bottom {
top: 0;
left: 0;
background-color: blue;
}
#top {
top: 25%;
left: 25%;
background-color: red;
}
<div id="bottom">Bottom</div>
<div id="top">Top</div>
Порядок размещения можно изменить с помощью CSS, используя свойства z-index или order.
Мы можем игнорировать порядок размещения в этом выпуске, поскольку естественная HTML-структура элементов означает, что элемент, который мы хотим отобразить на top, идет после другого элемента.
Итак, вернемся к проблеме - мы будем использовать контекст позиции для решения этой проблемы.
Решение
Как указано выше, наша цель - расположить элемент #infoi так, чтобы он находился внутри элемента .navi. Для этого мы обернем элементы .navi и #infoi в новый элемент <div class="wrapper">, чтобы мы могли создать новый контекст позиции.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
Затем создайте новый контекст позиции, задав .wrapper a position: relative.
.wrapper {
position: relative;
}
С этим новым контекстом позиции мы можем позиционировать #infoi в .wrapper. Сначала дайте #infoi a position: absolute, что позволит нам позиционировать #infoi абсолютно в .wrapper.
Затем добавьте top: 0 и right: 0, чтобы поместить элемент #infoi в верхнем правом углу. Помните, поскольку элемент #infoi использует .wrapper в качестве контекста позиции, он будет находиться в верхнем правом углу элемента .wrapper.
#infoi {
position: absolute;
top: 0;
right: 0;
}
Поскольку .wrapper является просто контейнером для .navi, расположение #infoi в верхнем правом углу .wrapper дает эффект расположения в верхнем правом углу .navi.
И у нас это есть, #infoi теперь, кажется, находится в верхнем правом углу .navi.
Результат
Пример ниже сводится к основам и содержит некоторые минимальные стили.
/*
* position: relative gives a new position context
*/
.wrapper {
position: relative;
}
/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/
.navi {
background-color: #eaeaea;
height: 40px;
}
/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/
#infoi {
position: absolute;
top: 0;
right: 0;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;
}
<div class="wrapper">
<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>
</div>
Альтернативное решение (без оболочки)
В случае, если мы не можем редактировать HTML, то есть мы не можем добавить элемент-обертку, мы все равно можем добиться желаемого эффекта
Вместо использования position: absolute для элемента #infoi мы будем использовать position: relative. Это позволяет нам переместить элемент #infoi из положения по умолчанию ниже элемента .navi. С position: relative мы можем использовать отрицательное значение top, чтобы переместить его из положения по умолчанию, и значение left 100% минус несколько пикселей, используя left: calc(100% - 52px), чтобы расположить его рядом с правой стороной. ,
/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/
.navi {
background-color: #eaeaea;
height: 40px;
width: 100%;
}
/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/
#infoi {
position: relative;
display: inline-block;
top: -40px;
left: calc(100% - 52px);
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;
}
<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>