J'ai besoin d'empiler ces deux divs sur le dessus de chaque autre tout en conservant le contenu des positions

J'ai besoin d'empiler ces deux divs sur le dessus les uns des autres mais j'ai du mal à trouver un moyen de rendre cela possible. J'ai besoin de garder al le texte à l'intérieur dans les mêmes positions, mais ils doivent être en mesure d'avoir des divs s'asseoir sur le dessus de l'un et de l'autre, sans réglage des positions absolues.

Voici ce que j'ai...

<body>


<div style="position:relative;">
  <div style="position:absolute">
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
  </div>
</div>


<div style="position:relative;">
  <div style="position:absolute">
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
  </div>
</div>

</body>
Il vous manque plusieurs crochets de clôture.

OriginalL'auteur user3233834 | 2014-01-24

  1. 4

    Vous devez mettre le contenu de vos deux divs à l'intérieur d'un div extérieure qui a de la "position:relative", et de mettre en positionnement absolu sur l'intérieur de votre divs, et ajouter un z-index à chacun d'eux. Puis le plus grand z-index est placé sur la plus petite.

    <body>
   <div style="position:relative;">
      <div style="position:absolute;z-index:0;">
         <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
         <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
      </div>

      <div style="position:absolute;z-index:1;">
         <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
         <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
      </div>
   </div>
</body>
    Cool, donc... pour clarifier, vous utilisez position:relative; pour le maintenir en place, de la boîte ou dans le position:absolute;? Fondamentalement position:relative; devient l'élément ancêtre de l'absolu éléments positionnés, comme par w3schools qui dit: "absolute: The element is positioned relative to its first positioned (not static) ancestor element" Est-ce correct?

    OriginalL'auteur Peter

  2. 3

    Peut-être cet exemple simple va vous aider à:

    Lien pour violon

    <body>
    <div class="one">
        Content one
    </div>
    <div class="two">
        Content two
    </div>
</body>

    CSS:

    .one{
    color:red;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}
.two{
    color:blue;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

    En positionnant les deux divs absolument, nous pouvons alors utiliser les propriétés left et top, les mettre à la même à gauche et à des postes de haut (il peut être en pixels, en pourcentage, etc), et ensuite déterminer ce qui doit être placé sur le dessus de l'autre en variant le z-index. Le z-index supérieur numérotés div sera l'une sur le dessus, de sorte que le .un div sera sur le dessus et vous verrez de plus en plus de rouge que de bleu. Permuter les valeurs autour de sorte que .on a z-index:1 et .deux a z-index:2, et vous verrez de plus en plus bleu (car ceux-ci sont la police de couleurs).

    À partir d'ici, vous pouvez mettre le reste de votre contenu dans des divs dans mon exemple.

    OriginalL'auteur Hiigaran

  3. 2

    Vous avez deux options:

    1. Utilisation absolue postions sur votre divs. http://jsfiddle.net/sUyS3/1/

    2. Vous pouvez utiliser des marges négatives sur votre deuxième div.

      <div style="margin-top: -25px;">

    OriginalL'auteur Rick S