Bonsoir,
Pour un projet j'utilise les flexbox (parce que c'est tout simplement génial pour que les éléments ne partent pas dans tout les sens). Donc en faite j'ai deux images, une image en arrière plan et une autre image. J'aimerais que la deuxième images se positionne par dessus la première.
J'ai déjà essayé d'utilise les position absolute et les z-index pour le positionnement.
Mais ce n'est pas idéal.
Auriez-vous une solution ?
14 réponses
Bon, dans l'idée où je n'utilise pas de flex-box pour ça. Comment ferais-tu pour centrer un élément ?
Je crois que j'aurai utilisé un "centrage par positionnement", mais j'ai du mal à déterminer si dans ton cas c'est pertinent ou non.
HTML
<body>
<div class="container">
<div class="picture"></div>
</div>
</body>CSS
body {
padding: 50px;
}
.container {
background-color: grey;
width: 100%;
height: 600px;
}
.picture {
width: 255px;
height: 200px;
background-image: url("http://lorempicsum.com/futurama/255/200/2");
/* le centrage par positionnement */
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}Sinon avec un centrage flex, je crois que j'aurai fais comme ça :
HTML
<body>
<div class="container">
<div class="background">
<div class="black"></div>
<div class="picture"></div>
</div>
<div class="content">
Du contenu, placé en dessous de la div "background"
</div>
</div>
</body>CSS
body {
display: flex;
justify-content: center;
}
.background {
display: flex;
justify-content: center;
align-items: center;
position: relative; /* Pour que ".black" ne "sorte" pas de ".background" */
width: 1254px;
height: 600px;
background-image: url("http://lorempicsum.com/futurama/1254/600/4");
}
.black {
/* les 5 lignes suivante :
Pour que ".black" prenne tout le contenu du 1er élément parent "positionné",
en l'occurence : ".background"
*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Pour assombrir */
background-color: #000;
opacity: 0.7;
}
.picture {
width: 255px;
height: 200px;
background-image: url("http://lorempicsum.com/futurama/255/200/2");
z-index: 1; /* Pour que l'image ne soit pas assombrie
}Salut,
J'aimerais que la deuxième image se positionne par dessus la première.
J'ai déjà essayé d'utiliser les position absolute et les z-index pour le positionnement.
Mais ce n'est pas idéal.
Je ne suis pas sûr d'avoir bien compris, mais pour mettre quelque chose en arrière plan (ou devant), c'est bien z-index qu'il faut utiliser.
Avant qu'on ait le système de boîtes flex, il fallait "positionner" notre élément pour pouvoir lui appliquer un z-index.
Mais si tu travail avec les flex, alors tous les flex-items prennent automatiquement en compte la propriété z-index sans avoir à être "positionné".
Un élément est considéré comme étant un flex-item, lorsqu'il est un 'enfant' d'un élément qui a : display: flex;.
Il faut donc mettre un display: flex; à l'élément parent de tes images, pour que ces images deviennent des flex-item, et ainsi, pouvoir leur appliquer un z-index.
Est-ce que ça répond à ta question ? J'ai peur d'avoir répondu à côté.
Déjà je tiens a te remercier pour la clarté de ta réponse. Je vais essayer ça et je te dis :D
Mais par exemple si j'entoure mes images d'une div. Et que j'applique a cette div la propriété display flex.
L'image deviendra un flex item ?
De rien. ^^
si j'entoure mes images d'une div. Et que j'applique a cette div la propriété display flex.
L'image deviendra un flex item ?
Oui, c'est ça.
J'ai fais quelque tests :
Pour donner un effet j'applique un background noir en dessous de mon image de background.
j'aimerais mettre l'image avec la classe me_picture par dessus le background "me_background".
Mon code HTML :
<body>
<img src="img/background.jpg" class="me_background">
<div class="me_picture_div"><img src="img/me.jpg" class="me_picture"></div>
</body>Mon code CSS :
body{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
background-color: #000;
}
.me_background{
width: 100%;
height: 643px;
opacity: 0.4;
}
.me_picture_div{
display: flex;
z-index:2;
}
.me_picture{
width: 250px;
height: 250px;
z-index: 3;
}
.content{
width: 100%;
height: 643px;
background-color: #d6d6d6;
}Selon toi d'où viens l'erreur ?
Ici, me_background et me_picture_div sont 2 enfants du parent body.
Comme dans le HTML, ils sont placés l'un après l'autre, alors ils se positionneront l'un après l'autre dans le "flux" (normal).
Si tu veux modifier ce comportement, pour à la place, les mettre l'un PAR-DESSUS l'autre, il faut utiliser les position.
Si on met un élément en position: absolute;, cet élément va se placer en haut à gauche, du premier élément parent "positionné" au dessus de lui (ou du body en dernier recours, si aucun élément parent n'était "positionné").
Du coup on va "positionner" en absolu les éléments que tu veux "superposer" (ce sont : me_background et me_picture_div).
Et pour qu'ils ne "sortent" pas plus loin que leur parent, on va aussi "positionner" l'élément parent, pour qu'il "bloque" ses enfants "positionnés".
Cet élément parent, on choisit de le positionner en relative comme ça il est "positionné", mais au moins il ne bouge pas de là où il est dans le flux.
(en fait, comme dans cet exemple, le parent est body, on avait pas vraiment besoin de le "positionner", mais s'il avait été autre chose que body, alors ce parent aurait dû être positionné).
Oui, je sais que si je veux utiliser z-index convenablement je dois utiliser des positions absolute.
Mais là je suis face a un autre problème. Il y a un gros décalage a cause des flexbox.
Et donc la solution serait de ne pas utiliser de flex box, c'est vrai :D. Mais alors ça foire totalement la présentation pour les autres devices .
Bah en faite j'utilise une image comme background, derrière le body a un background color noir.
Et j'aimerais donc mettre une image de 230 par 230 sur l'image de background.
Pour éviter que tout se casse j'utilise les flexbox ^^.
Mais je ne peux pas utiliser position absolute vu que ça casse tout le truc mis en place avec flexbox ^^.
Pour être plus claire lors de mes propos :
Photo 1 correspond a la photo en background
et photo 2 la l'autre photo, celle que je cherche a centrer.
Bon, voici mon image de background, j'aimerais que photo 2 aille au millieu de celle ci.
Comme tu peux le voir photo 1 est légèrement assombri par quelque chose.
J'ai appliqué comme dis plus haut, un background color noir sur le body, donc je fais en sorte que cette image ait un opacity particulier :D.
Et je compte ajouter du contenu en dessous de cette image (photo 1) avec une div particulière. En utilisant un order plus gros.
J'aimerais aussi faire en sorte que photo 2 soit au millieu.
Bon, dans l'idée où je n'utilise pas de flex-box pour ça. Comment ferais-tu pour centrer un élément ? Et pour qu'il garde son centrage selon la largeur de la page ?
Dans ce cas la photo 2.