Wie man ein Div über ein anderes Div legt

Ich brauche Unterstützung bei der Überlagerung einer Person mit einer divanderen Person div.

Mein Code sieht folgendermaßen aus:

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

Leider kann ich das div#infoioder das nicht imgim ersten verschachteln div.navi.

Es müssen zwei separate divs sein, wie gezeigt, aber ich muss wissen, wie ich das div#infoiüber div.naviund ganz rechts platzieren und oben auf dem zentrieren kann div.navi.

#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: relativeund untergeordnete Elemente mit zu lernen position: absolute.

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:

• top
• right
• bottom
• left

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>

Durch eine Verwendung divmit Stil z-index:1;und position: absolute;Sie können Ihre Overlay divauf jedem anderen div.

z-indexbestimmt die Reihenfolge, in der divs 'stack'. Ein Div mit einem höheren Wert z-indexwird vor einem Div mit einem niedrigeren Wert angezeigt z-index. Beachten Sie, dass diese Eigenschaft nur mit positionierten Elementen funktioniert .

Die neue Grid CSS- Spezifikation bietet eine weitaus elegantere Lösung. Die Verwendung position: absolutekann zu Überlappungen oder Skalierungsproblemen führen, während Grid Sie vor schmutzigen CSS-Hacks bewahrt.

Beispiel für die minimalste Rasterüberlagerung:

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.

Hier folgt eine einfache Lösung, die zu 100% auf CSS basiert. Das "Geheimnis" besteht darin, das display: inline-blockim Wrapper-Element zu verwenden. Das vertical-align: bottomim 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, kann es verschachtelt werden. In diesem Fall können Sie die Verpackung in einen Behälter einwickeln mit display: block- normalerweise einem guten und einem 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 weder ein Programmierer noch ein Experte für CSS, 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ü-Div steuern, das innerhalb des Header-Div 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.

Hier ist ein einfaches Beispiel, um einen Overlay-Effekt mit einem Ladesymbol über einem anderen Div zu erzielen.

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper{
        position: relative;
        width:400px;  /* Just for testing, remove width and height if you have content inside this div */
        height:500px; /* Remove this if you have content inside */
    }
</style>

<h2>The overlay tester</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Apply the overlay over this div</h3>
</div>

Probieren Sie es hier aus: http://jsbin.com/fotozolucu/edit?html,css,output