wake-up-neo.com

Wie man ein Div über ein anderes Div legt

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 divs 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.

htmlcsspositionoverlay
851
tonyf
#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.

1140
alex

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.

Das Problem

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.

Vorgeschlagene Lösung

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 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 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.

Die Lösung

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 Ergebnis

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>

Die alternative Lösung (ohne Wrapper)

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>
265
Brett DeWoody

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.

107
Hari Thakur

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>
20
Tuco

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>
19
DhavalThakor

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.

9
Muhammad Ahsan

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.

6
ja0nz