Question Comment superposer un div sur un autre div


En espérant que quelqu'un puisse aider mais j'ai besoin d'aide pour superposer une personne 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 nicher le div#infoi ou la img, à l'intérieur du premier div.navi.

Il doit être deux séparés divs comme indiqué mais j'ai besoin de savoir comment je pourrais placer le div#infoi au dessus de div.navi et à droite le plus de côté et centré sur le dessus de la div.navi.

J'apprécierais toute aide pour y parvenir.


734
2018-05-31 03:15


origine


Réponses:


#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 suggère d'apprendre à propos de position: relative et des éléments enfants avec position: absolute.


984
2018-05-31 03:20



La solution acceptée fonctionne très bien, mais l'OMI n'a pas d'explication expliquant pourquoi cela fonctionne. L'exemple ci-dessous se résume à l'essentiel et sépare le CSS important du style CSS non pertinent. En bonus, j'ai également inclus une explication détaillée du fonctionnement du positionnement CSS.

TLDR; Si vous voulez seulement le code, faites défiler jusqu'à Le résultat.

Le problème

Il y a 2 éléments séparés, frères et sœurs, et le but est de positionner le 2ème élément (avec un id de infoi) donc il apparaît dans l'élément précédent (celui avec une classe de navi). La structure HTML ne peut pas être modifiée.

Solution proposée

Pour atteindre le résultat souhaité, nous allons déplacer, ou positionner, le 2ème élément, que nous appellerons #infoi donc il apparaît dans le 1er élément, que nous appellerons .navi. Plus précisément, nous voulons #infoi être placé dans le coin supérieur droit de .navi.

Position CSS requise Connaissances

CSS a plusieurs propriétés pour le positionnement des éléments. Par défaut, tous les éléments sont position: static. Cela signifie que l'élément sera positionné selon son ordre dans la structure HTML, à quelques exceptions près.

L'autre position les valeurs sont relative, absolute, et fixed. En définissant un élément position à l'une de ces 3 valeurs, il est maintenant possible d'utiliser une combinaison des 4 propriétés suivantes pour positionner l'élément:

  • top
  • right
  • bottom
  • left 

En d'autres termes, en définissant position: absolute, nous pouvons ajouter top: 100px pour positionner l'élément 100px du haut de la page. Inversement, si nous définissons bottom: 100px l'élément serait positionné à 100 px du bas de la page.

Voici où beaucoup de nouveaux arrivants CSS se perdent - position: absolute a un cadre de référence. Dans l'exemple ci-dessus, le cadre de référence est le body élément. position: absolute avec top: 100px signifie que l'élément est positionné 100px du haut de la body élément.

Le repère de position ou le contexte de position peuvent être modifiés en réglant position d'un élément parent à toute valeur autre que position: static. Autrement dit, nous pouvons créer un nouveau contexte de position en donnant un élément parent:

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

Par exemple, si un <div class="parent"> élément est donné position: relative, tous les éléments enfants utilisent le <div class="parent"> comme leur contexte de position. Si un élément enfant a été donné position: absolute et top: 100px, l'élément serait positionné à 100px du haut du <div class="parent"> élément, parce que le <div class="parent">est maintenant le contexte de position.

L'autre facteur être au courant de ordre de pile - ou comment les éléments sont empilés dans la direction z. Le must-know ici est l'ordre de pile des éléments qui sont, par défaut, définis par l'inverse de leur ordre dans la structure HTML. Considérez l'exemple suivant:

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

Dans cet exemple, si les deux <div> éléments ont été positionnés au même endroit sur la page, le <div>Top</div> élément couvrirait le <div>Bottom</div> élément. Depuis <div>Top</div> vient après <div>Bottom</div> dans la structure HTML, il a un ordre d'empilement plus élevé.

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>

L'ordre d'empilement peut être modifié avec CSS en utilisant le z-index ou order Propriétés.

Nous pouvons ignorer l'ordre d'empilement dans ce numéro car la structure HTML naturelle des éléments signifie l'élément sur lequel nous voulons apparaître top vient après l'autre élément.

Donc, revenons au problème actuel - nous utiliserons le contexte de position pour résoudre ce problème.

La solution

Comme indiqué ci-dessus, notre objectif est de positionner #infoi élément de sorte qu'il apparaît dans le .navi élément. Pour ce faire, nous allons envelopper le .navi et #infoi éléments dans un nouvel élément <div class="wrapper"> Nous pouvons donc créer un nouveau contexte de position.

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi"></div>
</div>

Ensuite, créez un nouveau contexte de position en donnant .wrapper une position: relative.

.wrapper {
  position: relative;
}

Avec ce nouveau contexte de position, nous pouvons positionner #infoi dans .wrapper. D'abord, donnez #infoi une position: absolute, nous permettant de positionner #infoi absolument dans .wrapper.

Puis ajouter top: 0 et right: 0 positionner le #infoi élément dans le coin supérieur droit. Rappelez-vous, parce que le #infoi élément utilise .wrapper comme son contexte de position, il sera en haut à droite de la .wrapper élément.

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

Car .wrapper est simplement un récipient pour .navi, positionnement #infoi dans le coin supérieur droit de .wrapper donne l'effet d'être placé dans le coin supérieur droit de .navi.

Et là nous l'avons, #infoi semble maintenant être dans le coin en haut à droite de .navi.

Le résultat

L'exemple ci-dessous est réduit à l'essentiel et contient un style minimal.

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

La solution alternative (sans wrapper)

Dans le cas où nous ne pouvons pas éditer de code HTML, ce qui signifie que nous ne pouvons pas ajouter un élément wrapper, nous pouvons toujours obtenir l'effet désiré.

À la place d'utiliser position: absolute sur le #infoi élément, nous allons utiliser position: relative. Cela nous permet de repositionner le #infoi élément de sa position par défaut en dessous de la .navi élément. Avec position: relative nous pouvons utiliser un négatif top valeur pour le déplacer de sa position par défaut, et un left valeur de 100% moins quelques pixels, en utilisant left: calc(100% - 52px), pour le positionner près du côté droit.

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



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

z-index détermine l'ordre dans lequel la pile de divs. Une div avec un plus haut z-index apparaîtra devant une div avec une baisse z-index. Notez que cette propriété ne fonctionne qu'avec des éléments positionnés.


98
2018-05-23 13:46



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>


18
2018-01-30 07:45



Voici une solution simple 100% basée sur CSS. Le "secret" est d'utiliser le display: inline-block dans l'élément wrapper. le vertical-align: bottomdans l'image est un hack pour surmonter le remplissage de 4px que certains navigateurs ajoutent après l'élément.

Conseil: si l'élément avant l'encapsuleur est en ligne, ils peuvent se retrouver imbriqués. Dans ce cas, vous pouvez "envelopper l'emballage" dans un conteneur avec display: block - Habituellement un bon et un vieux 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



Je ne suis pas vraiment un codeur ni un expert en CSS mais j'utilise toujours votre idée dans mes conceptions web. J'ai aussi 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 d'eux. Vous pouvez contrôler l'emplacement du menu div qui sera affiché dans le div de l'en-tête avec les marges de gauche et les positions supérieures. Vous pouvez également définir le menu div pour flotter à droite si vous le souhaitez. J'espère que cela t'aides.


9
2017-08-28 23:46