web-dev-qa-db-fra.com

Comment positionner l'absolu à l'intérieur d'un div?

J'ai un étrange problème pour positionner un ensemble de div à l'intérieur d'un autre div. Je pense que ce sera mieux de le décrire avec une image:

image

À l'intérieur du div noir (#box), il y a deux div (.a, .b) qui doivent être positionnés au même endroit. Ce que j'essaie de réaliser est illustré dans la première image, la deuxième est l'effet que j'obtiens. Il semble que si les divs ont été flottées sans compensation ni autre chose, ce qui n'est évidemment pas le cas. Toutes les idées seront les bienvenues!

Voici le code de cet exemple:

CSS:

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}

HTML:

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>

    <div id="after">Hello world</div>
csspositioning
32
Justine

Les div absolus sont retirés du flux du document de sorte que le div contenant n'a pas de contenu à l'exception du remplissage. Donnez une hauteur à #box pour le remplir.

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}
31
Emily
  1. Tout d'abord, tous les éléments de niveau bloc sont postés statiques dans le "document". Le positionnement par défaut pour tous les éléments est position: static, ce qui signifie que l'élément n'est pas positionné et se produit comme il le ferait normalement dans le document. Normalement, vous ne le spécifieriez pas sauf si vous aviez besoin de remplacer un positionnement qui avait été précédemment défini.
  2. Position relative: si vous spécifiez position: relative, vous pouvez ensuite utiliser le haut ou le bas et la gauche ou la droite pour déplacer l'élément par rapport à l'endroit où il se produirait normalement dans le document.
  3. Lorsque vous spécifiez position: absolute, l'élément est supprimé du document et placé exactement là où vous lui dites d'aller.

Donc, en ce qui concerne votre question, vous devez positionner le bloc conteneur par rapport, à savoir:

#parent {
  position: relative;
}

Et l'élément enfant, vous devez positionner absolu à l'élément parent comme ceci:

#child {
  position: absolute;
}

Voir: Apprendre le positionnement CSS en dix étapes

39
Jimmy Obonyo Abor

Le problème est décrit (entre autres) dans cet article .

#box est relativement positionné, ce qui en fait une partie du "flux" de la page. Vos autres divs sont absolument positionnées, elles sont donc supprimées du "flux" de la page.

Le flux de page signifie que le positionnement d'un élément affecte d'autres éléments du flux.

En d'autres termes, comme #box voit maintenant le dom, .a et .b ne sont plus "à l'intérieur" #box.

Pour résoudre ce problème, vous voudriez tout rendre relatif, ou tout absolu.

Une façon serait:

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}
7
Tim Hoolihan

Un des #a ou #b ne doit pas être position:absolute, pour que #box va grandir pour l'accueillir.

Vous pouvez donc arrêter #a d'être position:absolute, et toujours positionner #b par dessus, comme ceci:

 #box {
        background-color: #000;
        position: relative;     
        padding: 10px;
        width: 220px;
    }
    
    .a {
        width: 210px;
        background-color: #fff;
        padding: 5px;
    }
    
    .b {
        width: 100px; /* So you can see the other one */
        position: absolute;
        top: 10px; left: 10px;
        background-color: red;
        padding: 5px;
    }
    
    #after {
        background-color: yellow;
        padding: 10px;
        width: 220px;
    }
    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>
    <div id="after">Hello world</div>

(Notez que j'ai fait des largeurs différentes, donc vous pouvez voir l'une derrière l'autre.)

Edit après le commentaire de Justine: Alors votre seule option est de spécifier la hauteur de #box. Cette:

#box {
    /* ... */
    height: 30px;
}

fonctionne parfaitement, en supposant que les hauteurs de a et b sont fixes. Notez que vous devrez mettre IE en mode standard en ajoutant un doctype en haut de votre HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

avant que cela fonctionne correctement.

7
RichieHindle