28172 sujets

CSS et mise en forme, CSS3

Images en cascade

Bonjour,

J'essaie en vain d'afficher des images en cascade : trois images en cascade, l'une sur l'autre en décalage l'une par rapport à l'autre, comme un escalier. Avant les images et après elles, il y a du texte ou d'autres images.

La "cascade" ne se réalise que si je mets position:absolute; mais du coup ça se met au dessus de tout. J'ai bien essayé de mettre mes trois images dans une div, mais cela ne change rien.

Voici mon html :
<div class="texte">
</div>

<div>
<div class="b"><img src="..."/></div>
<div class="c"><img src="..."/></div>
<div class="d"><img src="..."/></div>
</div>

<div class="texte">
</div>



Voici mon code CSS :


.b img {
position:absolute;
margin-left:-40px;
width:25%;
z-index:1;
}

.c img{
position:absolute;
top:5%;
left:10%;
width:25%;
z-index:2;
}

.d img{
position:absolute;
top:25%;
left:25%;
width:25%;
z-index:3;
}
Salut,

Désolé mais je n'ai pas le temps de répondre correctement à ta question...

Alors je vais t'en poser moi aussi des questions ce sera plus rapide pour moi Smiley smile

Partant du principe que tu veuilles positionner avec "absolute" , et je ne dis pas que c'est la meilleure solution..... je ne dis pas non plus que c'est pas la solution Smiley smile .... oui je sais ,c 'est un peu facile....

1) Est-ce qu'il n'y a que le css que tu as posté qui entre en jeu dans le visuel ?
2) As-tu positionné le parent direct de tes éléments "asbolute" ?
3) y-a-t-il une raison raisonnée à avoir mis chacune de tes images dans un div parent ?

Excuse-moi si ma réponse est énigmatique, entre-temps peut-être qu'un autre t'apportera une réponse...

J'ai l'impression que le problème n'est du qu'à un oubli....

https://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#position-absolue

Vraiment désolé si tu savais déjà tout ça...

Bien à toi
Smiley smile
Bonjour.

Les images ont par défaut un display: inline. Tu dois changer ce display (display: block, display: table) pour pouvoir leur appliquer un positionnement.

Cette condition remplie, il n'est pas nécessaire de les inclure dans des divs.

position: absolute est-elle la meilleure option ? il y a aussi position: relative ?
Modifié par thierry (17 Sep 2017 - 22:08)
Salut @thierry

Concernant :
.... Tu dois changer ce display (display: block, display: table) pour pouvoir leur appliquer un positionnement....


non le position absolute est prioritaire sur le display... une image en display inline peut être positionnée en absolute...
Modifié par Ethos (17 Sep 2017 - 22:16)
Modérateur
Sinon, pourquoi ne pas tenter de commencer avec des marges positives et négatives ? Il y a moyen d'interagir avec le reste sans tout casser Smiley smile Le positionnement absolue est plus complexe qu'il n'y parait.

exemple https://codepen.io/anon/pen/PJPBmP
Modifié par gcyrillus (17 Sep 2017 - 22:50)
Meilleure solution
Ethos,

1. non il n'y a pas que ça dans le CSS, mais je n'ai pas l'impression que ce soit le reste qui foire. Je peux me tromper.

2. Le parent direct, c'est à dire la div qui englobe les images a pour css

.images{
position:relative;
clear:both;}



<div class="texte">
</div>

<div class="images">
<div class="b"><img src="..."/></div>
<div class="c"><img src="..."/></div>
<div class="d"><img src="..."/></div>
</div>

<div class="texte">
</div>


3. Je voulais juste accorder à chacune d'elle une position différente, sans savoir comment faire autrement.
gcyrillus a écrit :
Sinon, pourquoi ne pas tenter de commencer avec des marges positives et négatives ? Il y a moyen d'interagir avec le reste sans tout casser Smiley smile Le positionnement absolue est plus complexe qu'il n'y parait.

exemple https://codepen.io/anon/pen/PJPBmP


Merci ! Je crois que c'est le plus simple !
Salut @benoit

Oui ! Smiley smile c'est plus simple comme ça... +1 @gcryrillus Smiley smile

Pour le positionnement "absolute",
comme les éléments sortent du flux, il suffisait de donner une hauteur au div parent.... ce n'était pas la meilleure solution mais ça pouvait fonctionner.... pas l'idéal certes, car si la hauteur de tes images n'est pas connue... ( il aurait fallu prendre en considération le design général ...)

pour le point 3 Smiley smile si j'avais posé la question, c'est parce qu'il était possible de donner directement le position absolute à l'image et de les mettre enfants directs de div.images

une hauteur au div parent + réécriture (éventuelle) des sélecteurs aurait fonctionné Smiley smile
Sujet clos
Aller à