Comment superposer une div sur une autre div

Question

Comment superposer une div sur une autre div

Demandé el 31 de Mai, 2010: Quand la question a-t-elle été
420513 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai besoin d'aide pour superposer un individu div sur un autre individu div .

Mon code ressemble à ceci :

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

Malheureusement, je ne peux pas imbriquer le div#infoi ou le img à l'intérieur du premier div.navi .

Il doit y avoir deux div comme indiqué, mais j'ai besoin de savoir comment je pourrais placer les div#infoi sur le div.navi et sur le côté le plus à droite et centré sur le haut de l'écran. div.navi .

Demandé el 31 de Mai, 2010 par tonsils

2 votes

Ce n'est pas le cas dans cette question, mais si vous avez une div à l'intérieur d'une autre div, la div intérieure peut être entièrement ou partiellement masquée en raison de l'utilisation de la technologie de l'information. overflow: hidden utiliser overflow: visible à la place.

Commenté el 23 de Mai, 2019 par Christophe Roussy

Answer 1

5 Réponses

Answer 2

1545voto

alex Points 186293

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

Je vous suggère de vous renseigner sur position: relative et les éléments enfants avec position: absolute .

Répondu el 31 de Mai, 2010 par alex (186293 Points )

6 votes

Merci Alex pour ton aide, mais ce que je constate maintenant, c'est que lorsque je redimensionne ma fenêtre et que je la fais glisser pour la réduire, mon image d'information ne reste pas avec sa division parent. Je voudrais qu'elle se déplace avec la division parent et qu'elle reste à peu près à la même position, même si l'écran a été quelque peu redimensionné.

Commenté el 31 de Mai, 2010 par tonsils

3 votes

@tonsils : Les instructions de alex devrait vous donner le résultat souhaité, donc il doit y avoir quelque chose d'autre qui cause le problème que vous décrivez. Pourriez-vous nous fournir un échantillon du code (HTML + CSS) afin que nous puissions vous aider ?

Commenté el 31 de Mai, 2010 par Erik Töyrä

21 votes

absolute les éléments positionnés sont positionnés par rapport à leur élément le plus proche explicitement positionné ( position:absolute|relative|fixed ) l'élément parent. juste une clarification supplémentaire ... jsfiddle.net/p5jkc8gz

Commenté el 9 de Août, 2014 par alexfreiria

Afficher 1 autres commentaires

Answer 3

142voto

Hari Thakur Points 231

En utilisant un div avec style z-index:1; y position: absolute; vous pouvez superposer votre div sur tout autre div .

z-index détermine l'ordre dans lequel les divs s'empilent. Une div avec un z-index apparaîtra en face d'un div avec une valeur inférieure. z-index . Notez que cette propriété ne fonctionne qu'avec des éléments positionnés .

Répondu el 23 de Mai, 2012 par Hari Thakur (231 Points )

10 votes

Pouvez-vous fournir un exemple ?

Commenté el 15 de Mars, 2017 par Fabricio PH

8 votes

La note concernant les éléments positionnés est essentielle.

Commenté el 21 de Avril, 2018 par Lawrence Dol

0 votes

Cette réponse est tellement incomplète qu'il faudrait un billet entier pour expliquer pourquoi. Recherchez les contextes d'empilement.

Commenté el 1 de Août, 2019 par Bojidar Stanchev

Afficher 2 autres commentaires

Answer 4

26voto

DhavalThakor Points 49

C'est ce dont vous avez besoin :

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>

Répondu el 30 de Janvier, 2013 par DhavalThakor (49 Points )

Answer 5

10voto

Muhammad Ahsan Points 343

Je ne suis pas un grand codeur ni un expert en CSS, mais je continue à utiliser votre idée dans mes conceptions Web. J'ai également essayé différentes résolutions :

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

Bien sûr, il y aura un emballage autour des deux. Vous pouvez contrôler l'emplacement de la div menu qui sera affichée dans la div en-tête avec des marges à gauche et des positions supérieures. Vous pouvez également définir la div menu pour qu'elle flotte à droite si vous le souhaitez.

Répondu el 28 de Août, 2010 par Muhammad Ahsan (343 Points )

Answer 6

1voto

Mc George Points 11

J'espère que le code CSS suivant vous aidera.

Code CSS

.trPic{
    width:320px;
    height:240px;
    background: url(img/flower.png) no-repeat;
    border:5px solid #000000;
}
.trPic .redO{
    position:relative;
    top:0px;
    width:320px;
    height:240px;
    background:#FF2400;
    opacity:0;
}
.trPic:hover .redO
{
    opacity:0.7;
}

HTML

<div class="trPic">
    <div class="redO">
    </div>
</div>

En savoir plus sur Overlay.... Techniques de superposition CSS

Répondu el 26 de Mai, 2014 par Mc George (11 Points )

Comment superposer une div sur une autre div

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment superposer une div sur une autre div

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: