Die akzeptierte Lösung funktioniert hervorragend, aber IMO fehlt eine Erklärung, warum sie funktioniert. Das folgende Beispiel beschränkt sich auf die Grundlagen und trennt das wichtige CSS vom nicht relevanten Styling-CSS. Als Bonus habe ich auch eine detaillierte Erklärung zur Funktionsweise der CSS-Positionierung beigefügt.
TLDR; Wenn Sie nur den Code möchten, scrollen Sie nach unten zu The Result .
Das Problem
Es gibt zwei separate Geschwisterelemente, und das Ziel besteht darin, das zweite Element (mit einem idvon infoi) so zu positionieren , dass es im vorherigen Element (dem mit einem classvon navi) erscheint. Die HTML-Struktur kann nicht geändert werden.
Vorgeschlagene Lösung
Um das gewünschte Ergebnis zu erzielen, verschieben oder positionieren wir das zweite Element, das wir aufrufen, #infoiso, dass es im ersten Element angezeigt wird, das wir aufrufen .navi. Insbesondere möchten wir #infoiin der oberen rechten Ecke von positioniert werden .navi.
CSS-Position Erforderliche Kenntnisse
CSS verfügt über mehrere Eigenschaften zum Positionieren von Elementen. Standardmäßig sind alle Elemente position: static. Dies bedeutet, dass das Element mit wenigen Ausnahmen gemäß seiner Reihenfolge in der HTML-Struktur positioniert wird.
Die anderen positionWerte sind relative, absolute, sticky, und fixed. Durch Setzen eines Elements positionauf einen dieser anderen Werte ist es jetzt möglich, eine Kombination der folgenden vier Eigenschaften zum Positionieren des Elements zu verwenden:
Mit anderen Worten, durch Festlegen position: absolutekönnen wir hinzufügen, top: 100pxum das Element 100 Pixel vom oberen Rand der Seite zu positionieren. Wenn wir umgekehrt festlegen, wird bottom: 100pxdas Element 100 Pixel vom unteren Rand der Seite entfernt positioniert.
Hier gehen viele CSS-Neulinge verloren - sieposition: absolutehaben einen Referenzrahmen. Im obigen Beispiel ist der Referenzrahmen dasbodyElement. position: absolutemittop: 100pxbedeutet, dass das Element 100 Pixel vom oberen Rand desbodyElements entfernt ist.
Der Positionsreferenzrahmen oder der Positionskontext kann geändert werden, indem das positioneines übergeordneten Elements auf einen anderen Wert als gesetzt wirdposition: static . Das heißt, wir können einen neuen Positionskontext erstellen, indem wir ein übergeordnetes Element angeben:
position: relative;position: absolute;position: sticky;position: fixed;
Wenn beispielsweise ein <div class="parent">Element angegeben wird position: relative, verwenden alle untergeordneten Elemente das <div class="parent">als Positionskontext. Wenn ein Kind Element gegeben wurden position: absoluteund top: 100pxwürde das Element 100 Pixel vom oberen Rand des positioniert sein <div class="parent">Element, weil die <div class="parent">jetzt die Position Kontext ist.
Der andere zu beachtende Faktor ist die Stapelreihenfolge - oder wie Elemente in z-Richtung gestapelt werden. Das Muss hier ist, dass die Stapelreihenfolge von Elementen standardmäßig durch die Umkehrung ihrer Reihenfolge in der HTML-Struktur definiert wird. Betrachten Sie das folgende Beispiel:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
Wenn in diesem Beispiel die beiden <div>Elemente an derselben Stelle auf der Seite positioniert <div>Top</div>wären , würde das <div>Bottom</div>Element das Element abdecken . Da <div>Top</div>kommt <div>Bottom</div>in der HTML-Struktur nach, hat es eine höhere Stapelreihenfolge.
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>
Die Stapelreihenfolge kann mit CSS über die Eigenschaften z-indexoder geändert orderwerden.
Wir können die Stapelreihenfolge in dieser Ausgabe ignorieren, da die natürliche HTML-Struktur der Elemente bedeutet, dass das Element, auf dem wir erscheinen möchten, topnach dem anderen Element kommt.
Zurück zum eigentlichen Problem: Wir werden den Positionskontext verwenden, um dieses Problem zu lösen.
Die Lösung
Wie oben erwähnt, ist es unser Ziel, das #infoiElement so zu positionieren , dass es innerhalb des .naviElements erscheint. Dazu werden die Elemente .naviund #infoiin ein neues Element eingeschlossen, <div class="wrapper">damit wir einen neuen Positionskontext erstellen können.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
Dann erstellen Sie eine neue Position Kontext , indem sie .wrapperein position: relative.
.wrapper {
position: relative;
}
Mit diesem neuen Positionskontext können wir #infoiinnerhalb positionieren .wrapper. Geben Sie zunächst #infoiein position: absolute, damit wir uns #infoiabsolut positionieren können .wrapper.
Fügen Sie dann das Element hinzu top: 0und right: 0positionieren Sie es #infoiin der oberen rechten Ecke. Denken Sie daran, dass sich das #infoiElement .wrapperoben rechts im Element befindet , da es als Positionskontext verwendet wird .wrapper.
#infoi {
position: absolute;
top: 0;
right: 0;
}
Da .wrapperlediglich ein Behälter zur .naviPositionierung #infoiin der rechten oberen Ecke .wrapperder Wirkung der verleiht in der oberen rechten Ecke positioniert ist .navi.
Und da haben wir es, #infoischeint jetzt in der oberen rechten Ecke von zu sein .navi.
Das Ergebnis
Das folgende Beispiel ist auf die Grundlagen beschränkt und enthält ein minimales Styling.
/*
* 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>
Eine alternative (Gitter-) Lösung
Hier ist eine alternative Lösung mit CSS Grid, um das .naviElement mit dem #infoiElement ganz rechts zu positionieren . Ich habe die ausführlichen gridEigenschaften verwendet, um es so klar wie möglich zu machen.
:root {
--columns: 12;
}
/*
* Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-template-rows: 40px;
}
/*
* Position the .navi element to span all columns
*/
.navi {
grid-column-start: 1;
grid-column-end: span var(--columns);
grid-row-start: 1;
grid-row-end: 2;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
background-color: #eaeaea;
}
/*
* Position the #infoi element in the last column, and center it
*/
#infoi {
grid-column-start: var(--columns);
grid-column-end: span 1;
grid-row-start: 1;
place-self: center;
}
<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>
Eine alternative Lösung (ohne Wrapper)
Wenn wir kein HTML bearbeiten können, dh kein Wrapper-Element hinzufügen können, können wir dennoch den gewünschten Effekt erzielen.
Anstatt position: absolutedas #infoiElement zu verwenden, verwenden wir position: relative. Dadurch können wir das #infoiElement von seiner Standardposition unterhalb des .naviElements neu positionieren . Mit können position: relativewir einen negativen topWert verwenden, um ihn von seiner Standardposition nach oben zu verschieben, und einen leftWert von 100%minus ein paar Pixeln left: calc(100% - 52px), um ihn in der Nähe der rechten Seite zu positionieren.
/*
* 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>
overflow: hidden. Verwenden Sieoverflow: visiblestattdessen.