Frage Wie man ein Div über ein anderes div überlagert


Hoffe, dass jemand helfen kann, aber ich brauche Hilfe bei der Überlagerung 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 das nicht verschachteln div#infoi oder der img, in der ersten div.navi.

Es muss zwei getrennte sein divs wie gezeigt, aber ich muss wissen, wie ich das platzieren könnte div#infoi über dem div.navi und auf der rechten Seite und zentriert auf der Oberseite der div.navi.

Ich würde jede Hilfe bei der Erreichung dieses Ziels zu schätzen wissen.


734
2018-05-31 03:15


Ursprung


Antworten:


#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, darüber zu lernen position: relative und Kindelemente mit position: absolute.


984
2018-05-31 03:20



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 von dem nicht relevanten CSS. Als Bonus habe ich auch eine detaillierte Erklärung zur Funktionsweise der CSS-Positionierung hinzugefügt.

TLDR; Wenn Sie nur den Code möchten, scrollen Sie nach unten Das Ergebnis.

Das Problem

Es gibt 2 separate Geschwisterelemente, und das Ziel ist es, das zweite Element zu positionieren (mit einem id von infoi) so erscheint es innerhalb des vorherigen Elements (das mit einer Klasse von navi). Die HTML-Struktur kann nicht geändert werden.

Vorgeschlagene Lösung

Um das gewünschte Ergebnis zu erzielen, werden wir das zweite Element, das wir aufrufen, verschieben oder positionieren #infoi so erscheint es innerhalb des ersten Elements, das wir nennen werden .navi. Konkret wollen wir #infoi in der oberen rechten Ecke von positioniert werden .navi.

CSS Position Erforderliche Kenntnisse

CSS hat mehrere Eigenschaften für Positionierungselemente. Standardmäßig sind alle Elemente position: static. Dies bedeutet, dass das Element mit wenigen Ausnahmen entsprechend seiner Reihenfolge in der HTML-Struktur positioniert wird.

Das andere position Werte sind relative, absolute, und fixed. Indem Sie ein Element festlegen position Auf einen dieser 3 Werte kann nun eine Kombination der folgenden 4 Eigenschaften verwendet werden, um das Element zu positionieren:

  • top
  • right
  • bottom
  • left 

Mit anderen Worten, durch Einstellung position: absoluteWir können hinzufügen top: 100px um das Element 100px vom Anfang der Seite zu positionieren. Umgekehrt, wenn wir uns festlegen bottom: 100px Das Element würde 100px vom unteren Rand der Seite positioniert werden.

Hier gehen viele CSS-Neulinge verloren - position: absolute hat einen Bezugsrahmen. Im obigen Beispiel ist der Referenzrahmen der body Element. position: absolute mit top: 100px bedeutet, dass das Element positioniert ist 100px von der Spitze der body Element.

Der Positionsrahmen der Referenz oder der Positionskontext kann durch Setzen der Option geändert werden position eines übergeordneten Elements an jeder andere Wert als position: static. Das heißt, wir können einen neuen Positionskontext erstellen, indem wir ein Elternelement angeben:

  • position: absolute;
  • position: relative;
  • position: fixed;

Zum Beispiel, wenn a <div class="parent"> Element ist gegeben position: relative, verwenden alle untergeordneten Elemente die <div class="parent"> als ihr Positionskontext. Wenn ein Kindelement angegeben wurde position: absolute und top: 100px, würde das Element 100px von der Spitze der positioniert werden <div class="parent"> Element, weil die <div class="parent">ist jetzt der Positionskontext.

Der andere Faktor sich bewusst sein ist Stapelreihenfolge - oder wie Elemente in z-Richtung gestapelt werden. Hier muss man wissen, dass die Stapelreihenfolge der Elemente standardmäßig durch die Umkehrung ihrer Reihenfolge in der HTML-Struktur definiert ist. Betrachten Sie das folgende Beispiel:

<body>
  <div>Bottom</div>
  <div>Top</div>
</body> 

In diesem Beispiel, wenn die beiden <div> Elemente wurden an der gleichen Stelle auf der Seite positioniert, die <div>Top</div> Element würde die abdecken <div>Bottom</div> Element. Schon seit <div>Top</div> Kommt danach <div>Bottom</div> in der HTML-Struktur 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 Schaltfläche geändert werden z-index oder order Eigenschaften.

Wir können die Stapelreihenfolge in diesem Problem ignorieren, da die natürliche HTML-Struktur der Elemente das Element bedeutet, auf dem wir erscheinen wollen top kommt nach dem anderen Element.

Also, zurück zum Problem - wir werden Positionskontext verwenden, um dieses Problem zu lösen.

Die Lösung

Wie oben erwähnt, ist es unser Ziel, die #infoi Element so erscheint es innerhalb der .navi Element. Um dies zu tun, wickeln wir die .navi und #infoi Elemente in einem neuen Element <div class="wrapper"> 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 durch Geben .wrapper ein position: relative.

.wrapper {
  position: relative;
}

Mit diesem neuen Positionskontext können wir positionieren #infoi innerhalb .wrapper. Geben Sie zuerst #infoi ein position: absolute, uns zu positionieren #infoi absolut in .wrapper.

Dann füge hinzu top: 0 und right: 0 positionieren #infoi Element in der oberen rechten Ecke. Denken Sie daran, weil die #infoi Element verwendet .wrapper als Position Kontext wird es in der oberen rechten Ecke der sein .wrapper Element.

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

weil .wrapper ist nur ein Behälter für .navi, Positionierung #infoi in der oberen rechten Ecke von .wrapper gibt den Effekt an, in der oberen rechten Ecke von positioniert zu werden .navi.

Und da haben wir es, #infoi scheint jetzt in der oberen rechten Ecke von zu sein .navi.

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 (keine Wrapper) -Lösung

Wenn wir kein HTML bearbeiten können, dh wir können kein Wrapper-Element hinzufügen, können wir immer noch den gewünschten Effekt erzielen.

Anstatt zu verwenden position: absolute auf der #infoi Element, werden wir verwenden position: relative. Dies ermöglicht es uns, die #infoi Element von seiner Standardposition unterhalb der .navi Element. Mit position: relative Wir können ein Negativ verwenden top Wert, um es von seiner Standardposition nach oben zu bewegen, und a left Wert von 100% minus ein paar Pixel, mit left: calc(100% - 52px), 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>


107
2017-09-20 09:27



Mit a div mit Stil z-index:1; und position: absolute; du kannst deine überlagern div auf irgendeinem anderen div.

z-index bestimmt die Reihenfolge, in der Divs 'Stack'. Ein div mit einem höheren z-index erscheint vor einem div mit einem niedrigeren z-index. Beachten Sie, dass diese Eigenschaft funktioniert nur mit positionierten Elementen.


98
2018-05-23 13:46



Das brauchst du:

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>


18
2018-01-30 07:45



Hier folgt eine einfache Lösung basierend auf CSS. Das "Geheimnis" ist die Verwendung der display: inline-block im Umhüllungselement. Das vertical-align: bottomin dem Bild ist ein Hack, um die 4px Padding zu überwinden, die einige Browser nach dem Element hinzufügen.

Rat: Wenn das Element vor dem Wrapper inline ist, kann es verschachtelt werden. In diesem Fall können Sie den Wrapper innerhalb eines Containers mit "verpacken" display: block - Gewöhnlich gut und alt 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>


15
2018-01-09 20:52



Ich bin nicht viel von einem Coder noch ein Experte in CSS, aber ich verwende immer noch Ihre Idee 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 einen Umschlag um beide geben. Sie können die Position des Menü-Div bestimmen, das innerhalb des Header-Divs mit linken Rändern und oberen Positionen angezeigt wird. Sie können das div-Menü auch so einstellen, dass es nach rechts schwebt. Hoffe das hilft.


9
2017-08-28 23:46