Überlagerung eines Divs über ein anderes Div

Question

Ich benötige Hilfe beim Überlagern einer Person div gegenüber einer anderen 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 die div#infoi ou le img innerhalb des ersten div.navi .

Es muss sich um zwei getrennte div s wie gezeigt, aber ich muss wissen, wie ich die div#infoi über die div.navi und auf der rechten Seite und mittig auf der Oberseite des div.navi .

Answer 1

#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, sich über Folgendes zu informieren position: relative und untergeordneten Elementen mit position: absolute .

Answer 2

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

Minimalstes 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 war's. Wenn Sie nicht für den Internet Explorer bauen, wird Ihr Code höchstwahrscheinlich funktionieren.

Answer 3

Durch die Verwendung eines div mit Stil z-index:1; y position: absolute; können Sie Ihre Daten überlagern div auf jedem anderen div .

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

Answer 4

Sie müssen ein Elternteil mit einer relative position können Sie innerhalb dieses Elternteils die absolute position Ihrer divs

<div> <------Relative
  <div/> <------Absolute
  <div/> <------Absolute
  <div/> <------Absolute
<div/>

Endgültiges Ergebnis:

https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100

<div class="container">
  <div class="header">TOP: I am at Top & above of body container</div>

    <div class="center">CENTER: I am at Top & in Center of body container</div>

  <div class="footer">BOTTOM: I am at Bottom & above of body container</div>
</div>

HTML Body in voller Breite einstellen

 html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Danach können Sie ein div mit der relativen Position so einstellen, dass es die volle Breite und Höhe einnimmt

.container {
  position: relative;
  background-color: blue;
  height: 100%;
  width: 100%;
  border:1px solid;
  color: white;
  background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-color: #cccccc;
}

Innerhalb dieses div mit der relativen Position können Sie Ihr div mit absoluten Positionen setzen

On TOP über dem Container

.header {
  position: absolute;
  margin-top: -10px;
  background-color: #d81b60 ;
  left:0;
  right:0;
  margin:15px;
  padding:10px;
  font-size: large;
}

Unten über dem Behälter

.footer {
  position: absolute;
  background-color: #00bfa5;
  left:0;
  right:0;
  bottom:0;
  margin:15px;
  padding:10px;
  color: white;
  font-size: large;

}

Im CENTER über dem Container

.center {
  position: absolute;
  background-color: #00bfa5;
  left:  30%;
  right: 30%;
  bottom:30%;
  top: 30%;
  margin:10px;
  padding:10px;
  color: white;
  font-size: large;
}

Answer 5

Hier folgt eine einfache Lösung, die zu 100% auf CSS basiert. Das "Geheimnis" ist die Verwendung der display: inline-block im Wrapper-Element. Die vertical-align: bottom im Bild ist ein Hack, um das 4px-Padding zu umgehen, das einige Browser nach dem Element hinzufügen.

Beratung Wenn das Element vor dem Wrapper inline ist, können sie ineinander verschachtelt werden. In diesem Fall können Sie den Wrapper innerhalb eines Containers "einpacken" mit display: block - normalerweise eine gute und alte 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>