Ich benötige Unterstützung beim Überlagern einer Person div
über eine andere Person div
.
Mein Code sieht so aus:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
Leider kann ich den div#infoi
oder den img
nicht innerhalb des ersten div.navi
verschachteln.
Es müssen zwei separate div
s sein, wie gezeigt, aber ich muss wissen, wie ich den div#infoi
über dem div.navi
und ganz rechts platzieren und über dem div.navi
zentrieren kann.
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
</div>
</div>
Ich würde vorschlagen, etwas über position: relative
und untergeordnete Elemente mit position: absolute
zu lernen.
Die akzeptierte Lösung funktioniert gut, aber IMO fehlt eine Erklärung, warum es funktioniert. Das folgende Beispiel ist auf das Wesentliche reduziert und trennt das wichtige CSS vom nicht relevanten Stil-CSS. Als Bonus habe ich auch eine detaillierte Erläuterung der Funktionsweise der CSS-Positionierung beigefügt.
TLDR; Wenn Sie nur den Code möchten, scrollen Sie nach unten zu The Result.
Es gibt zwei separate, geschwisterliche Elemente und das Ziel ist, das zweite Element (mit einem id
von infoi
) so zu positionieren, dass es innerhalb des vorherigen Elements erscheint (das mit einem class
von navi
). Die HTML-Struktur kann nicht geändert werden.
Um das gewünschte Ergebnis zu erzielen, verschieben oder positionieren wir das zweite Element, das wir #infoi
nennen, so dass es innerhalb des ersten Elements erscheint, das wir .navi
nennen. Insbesondere soll #infoi
in der oberen rechten Ecke von .navi
positioniert werden.
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 position
Werte sind relative
, absolute
und fixed
. Durch Setzen von position
eines Elements auf einen dieser drei Werte ist es jetzt möglich, eine Kombination der folgenden vier Eigenschaften zum Positionieren des Elements zu verwenden:
top
right
bottom
left
Mit anderen Worten, durch Setzen von position: absolute
können wir top: 100px
hinzufügen, um das Element 100 Pixel vom oberen Rand der Seite entfernt zu positionieren. Wenn wir dagegen bottom: 100px
setzen, wird das Element 100 Pixel vom unteren Rand der Seite entfernt positioniert.
Hier verlieren sich viele CSS-Neulinge - position: absolute
hat einen Bezugsrahmen. Im obigen Beispiel ist der Referenzrahmen das body
-Element. position: absolute
mit top: 100px
bedeutet, dass das Element 100 Pixel vom oberen Rand des Elements body
entfernt ist.
Der Positionsbezugsrahmen oder der Positionskontext kann geändert werden, indem position
eines übergeordneten Elements auf einen anderen Wert als position: static
. Das heißt, wir können einen neuen Positionskontext erstellen, indem wir ein übergeordnetes Element angeben:
position: absolute;
position: relative;
position: fixed;
Wenn beispielsweise einem <div class="parent">
-Element position: relative
zugewiesen wird, verwenden alle untergeordneten Elemente den <div class="parent">
als Positionskontext. Wenn ein untergeordnetes Element mit position: absolute
und top: 100px
versehen würde, würde das Element 100 Pixel vom oberen Rand des <div class="parent">
-Elements entfernt positioniert, da <div class="parent">
jetzt der Positionskontext ist.
Der andere Faktor zu beachten ist Stapelreihenfolge - oder wie Elemente in z-Richtung gestapelt werden. Das Wichtigste hierbei ist, dass die Stapelreihenfolge von Elementen standardmäßig durch die umgekehrte Reihenfolge in der HTML-Struktur definiert wird. Betrachten Sie das folgende Beispiel:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
In diesem Beispiel würde das <div>
-Element das <div>Top</div>
-Element verdecken, wenn die beiden <div>Bottom</div>
-Elemente an derselben Stelle auf der Seite positioniert wären. Da <div>Top</div>
in der HTML-Struktur hinter <div>Bottom</div>
steht, 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-index
oder order
geändert werden.
Wir können die Stapelreihenfolge in dieser Ausgabe ignorieren, da die natürliche HTML-Struktur der Elemente bedeutet, dass das Element, das wir in top
anzeigen möchten, hinter dem anderen Element steht.
Zurück zum eigentlichen Problem - wir werden den Positionskontext verwenden, um dieses Problem zu lösen.
Wie bereits erwähnt, ist es unser Ziel, das #infoi
-Element so zu positionieren, dass es im .navi
-Element erscheint. Dazu werden die Elemente .navi
und #infoi
in ein neues Element <div class="wrapper">
eingeschlossen, damit wir einen neuen Positionskontext erstellen können.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
Erstellen Sie dann einen neuen Positionskontext, indem Sie .wrapper
einen position: relative
geben.
.wrapper {
position: relative;
}
Mit diesem neuen Positionskontext können wir #infoi
innerhalb von .wrapper
positionieren. Geben Sie zunächst #infoi
einen position: absolute
, damit wir #infoi
absolut in .wrapper
positionieren können.
Fügen Sie dann top: 0
und right: 0
hinzu, um das #infoi
-Element in der rechten oberen Ecke zu positionieren. Denken Sie daran, dass das #infoi
-Element .wrapper
als Positionskontext verwendet und sich oben rechts im .wrapper
-Element befindet.
#infoi {
position: absolute;
top: 0;
right: 0;
}
Da .wrapper
nur ein Container für .navi
ist, bewirkt die Positionierung von #infoi
in der rechten oberen Ecke von .wrapper
, dass die Position in der rechten oberen Ecke von .navi
.
Und da haben wir es, #infoi
scheint jetzt in der oberen rechten Ecke von .navi
zu sein.
Das folgende Beispiel ist auf das Wesentliche reduziert 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>
Falls wir kein HTML bearbeiten können, dh wir können kein Wrapper-Element hinzufügen, können wir dennoch den gewünschten Effekt erzielen.
Anstatt position: absolute
für das #infoi
-Element zu verwenden, verwenden wir position: relative
. Auf diese Weise können wir das #infoi
-Element von seiner Standardposition unter dem .navi
-Element neu positionieren. Mit position: relative
können wir einen negativen top
-Wert verwenden, um ihn von seiner Standardposition nach oben zu verschieben, und mit left: calc(100% - 52px)
einen left
-Wert von 100%
minus ein paar Pixel. _, um es 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>
Indem Sie ein div
mit Stil z-index:1;
und position: absolute;
verwenden, können Sie Ihr div
über jedes andere div
legen.
z-index
bestimmt die Reihenfolge, in der der 'Stapel' der Divs liegt. Ein Div mit einem höheren z-index
wird vor einem Div mit einem niedrigeren z-index
angezeigt. Beachten Sie, dass diese Eigenschaft funktioniert nur mit positionierten Elementen.
Hier folgt eine einfache Lösung, die zu 100% auf CSS basiert. Das "Geheimnis" besteht darin, den display: inline-block
im Wrapper-Element zu verwenden. Der vertical-align: bottom
im Bild ist ein Hack, um die 4px-Auffüllung zu überwinden, die einige Browser nach dem Element hinzufügen.
Hinweis: Wenn das Element vor dem Wrapper inline ist, können sie verschachtelt enden. In diesem Fall können Sie den Wrapper mit display: block
in einen Container "wickeln" - normalerweise mit einem guten und alten div
.
.wrapper {
display: inline-block;
position: relative;
}
.hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 188, 212, 0);
transition: background-color 0.5s;
}
.hover:hover {
background-color: rgba(0, 188, 212, 0.8);
// You can Tweak with other background properties too (ie: background-image)...
}
img {
vertical-align: bottom;
}
<div class="wrapper">
<div class="hover"></div>
<img src="http://placehold.it/450x250" />
</div>
Das brauchen Sie:
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}
#bg_mask {
position: absolute;
top: 0;
right: 0; bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 70px 140px 175px 140px;
padding : 30px;
width: 700px;
height: 400px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style>
<html>
<head>
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
</head>
<body>
<form action="test.html">
<div id="baselayer">
<input type="text" value="testing text"/>
<input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
<div id="bg_mask">
<div id="frontlayer"><br/><br/>
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
Use position: absolute to get the one div on top of another div.<br/><br/><br/>
The bg_mask div is between baselayer and front layer.<br/><br/><br/>
In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
<input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
</div>
</div>
</div>
</form>
</body>
</html>
Ich bin kein großer Programmierer oder CSS-Experte, aber ich verwende Ihre Idee immer noch in meinen Webdesigns. Ich habe auch verschiedene Auflösungen ausprobiert:
#wrapper {
margin: 0 auto;
width: 901px;
height: 100%;
background-color: #f7f7f7;
background-image: url(images/wrapperback.gif);
color: #000;
}
#header {
float: left;
width: 100.00%;
height: 122px;
background-color: #00314e;
background-image: url(images/header.jpg);
color: #fff;
}
#menu {
float: left;
padding-top: 20px;
margin-left: 495px;
width: 390px;
color: #f1f1f1;
}
<div id="wrapper">
<div id="header">
<div id="menu">
menu will go here
</div>
</div>
</div>
Natürlich wird es eine Hülle um beide geben. Sie können die Position des Menübereichs steuern, der innerhalb des Kopfbereichs mit linken Rändern und oberen Positionen angezeigt wird. Sie können das div-Menü auch so einstellen, dass es nach rechts schwebt, wenn Sie möchten.
Die neue Grid CSS Spezifikation bietet eine weitaus elegantere Lösung. Die Verwendung von position: absolute
kann zu Überlappungen oder Skalierungsproblemen führen, während Grid Sie vor schmutzigen CSS-Hacks bewahrt.
Das kleinste Beispiel für ein Raster-Overlay:
HTML
<div class="container">
<div class="content">This is the content</div>
<div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>
CSS
.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}
Das ist es. Wenn Sie nicht für Internet Explorer erstellen, funktioniert Ihr Code höchstwahrscheinlich.