Überlagerung eines Divs über ein anderes Div

Question

Überlagerung eines Divs über ein anderes Div

Gefragt el 31 de Kann, 2010: Wann wurde die Frage gestellt
2357167 Ansichten: Anzahl der Besuche der Frage
3 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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 .

Gefragt el 31 de Kann, 2010 von tonyf

Answer 1

3 Antworten

Answer 2

27voto

DhavalThakor Punkte 480

Das ist es, was Sie brauchen:

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>

Beantwortet el 30 de Januar, 2013 von DhavalThakor (480 Punkte )

Answer 3

10voto

Muhammad Ahsan Punkte 1762

Ich bin weder ein großer Programmierer noch ein Experte für CSS, aber ich verwende 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 um beide eine Hülle geben. Sie können die Position des Menü-Divs 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 rechts schwebt, wenn Sie möchten.

Beantwortet el 29 de August, 2010 von Muhammad Ahsan (1762 Punkte )

Answer 4

0voto

Nishad Up Punkte 3021

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

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

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

Beantwortet el 28 de August, 2018 von Nishad Up (3021 Punkte )

Überlagerung eines Divs über ein anderes Div

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Überlagerung eines Divs über ein anderes Div

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: