28172 sujets

CSS et mise en forme, CSS3

Position absolute dans une div

Hello,
Dans le but de créer une animation de fondu d'image, je souhaite divisé ma page en n div.
Les div seront placer l'une à la suite de l'autre horizontalement, et à l'intérieur de chaque div, j'aimerais insérer 2 images de même dimension, l'une par dessus l'autre.
Pour pouvoir empiler mes images, je les ai positionner en absolue, après avoir définis un positionnement relatif sur l'élément parent,

D'après le tuto sur les positionnements:
"Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre."

Je pensais donc que mes images se placeraient automatiquement au point d'origine de chaque div qui les contient vue qu'elles ont un positionnement, mais au lieu de cela elles sont placée au point d'origine du document avec la div qui les contient

Mon code html:
   
 <div id="page">
        <div id="img1">
            <img src="image1_1" alt="g" />
            <img src="image1_2" alt="g" />
        </div>
        <div id="img2">
            <img src="image2_1" alt="g" />
            <img src="image2_2" alt="g" />
        </div>
    </div>


Et le CSS:

#page{
    display: inline-block;
    position: relative;
}
#img1 {
    position: relative;
}
#img1 img{
    position: absolute;
}
#img2 {
    position: relative;
}
#img2 img{
    position: absolute;
}


J'aimerais que mes div restent placé les une à la suite des autres, et que les éléments qu'elles contiennent soit placé au point d'origine de la div et non du document, si possible sans sortir les div du flux.
Merci d'avoir pris le temps de répondre.

Tu dois placer le "position:relative" sur les parents directs des images.
Sinon toutes tes images vont s'empiler les unes sur les autres dans le container grand-parent

Je comprend ce que tu dit, ça me parait logique, mais dans le code que j'ai mis au dessus, ce n'est pas ce que je fais ?
J'ai essayer ton bout de code, ça donne bien le comportement que je cherche, mais j'aimerais éviter de passer par une grid si possible, en fait chaque div possédera une image avant/après qui aura la même taille, mais les div n'auront pas forcement toutes la même taille, je voudrais donc éviter de définir une taille de colonne fixe.


#page div {
    display: inline-block;
}
#page div img:first-child {
    position: absolute;
}


Avec ce bout de code j'ai bien mes images qui se superposent à l'endroit voulu, mais à vrai dire je comprend pas vraiment pourquoi
* Dans le premier exemple de code que tu as donné les parents directs des <img> sont #img1 et #img2. ce sont à ces <div> qu'il faut appliquer "position: relative" pour créer un repère pour placer les éléments qui seront avec "position: absolute"
* En fonctionnement normal, les boites (<div> ou autres ) de même rang s'empilent les uns après les autres en file indienne.
* Dès que tu mets un élément en "position: absolute" tu sors cet élément de la file et les autres éléments vont continuer à s'afficher en file indienne sans tenir compte de lui.
* Cet élément qui se trouve isolé va se placer par rapport au repère de l'élément le plus direct qui est en "position:relative". Il fait bande à part.
* Si tu retires de la file tous les éléments d'un container comme <div>, ce container n'a plus rien à afficher dans la file et sa hauteur ou sa largeur devient nulle. C'est pour cela qu'il faut garder une image dans la file pour dimensionner ce container. Arbitrairement, je choisis la première image pour cela en l'exclusant de "position: relative". d'où la règle avec le sélecteur :
#page > div > img:not(:first-of-type)
* Dans cette boite toutes les autres images qui sont en "position: absolute" vont s'empiler au dessus de celle s'affiche normalement dans la file. Pour cela on met leurs coordonnées à 0
left: 0; top: 0;
On prend bien sûr les images de même taille dans chaque boite (<div>)
* On joue ensuite sur la transparence des images de dessus pour afficher celles de dessous
opacity: 0;
/* .... */
opacity: 1;
* display: grid est aujourd'hui la solution la plus efficace pour agencer une page HTML. Tu peux utiliser display:flex ou <table> ou éventuellement display: inline-block qui est le moins pertinent.
Modifié par bazooka07 (18 Oct 2018 - 23:22)
Sujet clos
Aller à