28172 sujets

CSS et mise en forme, CSS3

[Résolu] Position relative

Bonjour à tous,

Je viens vers vous à propos du positionnement relatif. J'ai très bien compris le principe des différentes méthodes de positionnement (relatif, absolu, float etc...), et donc j'essaye un peu ces différents positionnement.

A partir d'un template trouvé sur le net, j'essaye de faire l'intégration de celui-ci et je rencontre un petit problème. J'ai une image sur laquelle est positionné un petit bloc (en bas de l'image) qui contient une description de l'image. Dans mon html, j'ai donc un bloc pour l'image suivi d'un bloc pour la description.

Après avoir réfléchis à la méthode à utiliser pour positionner mon bloc sur l'image, je me dis que le positionnement relatif est une bonne chose pour décaler ce bloc de quelques pixels vers le haut.

Un petit exemple en image :

http://i57.servimg.com/u/f57/15/74/70/42/sans-t12.jpg

Voici donc le résultat obtenu qui est celui que je voulais. Mais maintenant mon élément est "à moitié" sorti du flux. Les éléments qui suivent sont en dessous mais bien plus bas (la taille de mon bloc en relatif étant invisible mais toujours présente dans le flux).

Que convient-il de faire à ce moment là pour que mes blocs suivants continuent normalement ? Les passer en relatif eux aussi ? Smiley confus

Je vous remercie d'avance si vous arrivez à comprendre ce que j'ai écris et si vous arrivez à m'éclairer Smiley lol
Modifié par Milouche (06 Jan 2014 - 00:31)
Modérateur
Bonsoir,

pour ce genre de visuel, on se sert plutôt du positionnement absolu. C'est l'image qui prendra sa place dans le flux et le texte viendra par-dessus en absolu, positionné en bas. Cela permet de garder une structure correcte en agrandissant le texte.

Et un exemple: http://jsfiddle.net/GExVe/
Modifié par kustolovic (05 Jan 2014 - 23:21)
Merci beaucoup de ta réponse Kustolovic.

Donc pour ce genre de chose, la position absolu est de mise.
Juste une chose que j'ai du mal à comprendre. Je vois pas à quoi sert le inline-block sur la div .img-block ? Idem avec le display : block sur la balise img...

Par contre, dans un autre cas où je devrais avoir un positionnement relatif, que faudrait-il faire pour résoudre ce problème ?

Encore merci pour avoir pris le temps de me répondre Smiley biggrin
Modérateur
J'ai mis la div extérieure en inline-block pour qu'elle prenne la largeur de l'image, et pas plus. Un float, un positionnement absolu, un display table pourraient aussi convenir, selon les cas.

Le display block sur l'image, c'est pour chasser l'espace créé sous l'image quand elle est positionnée en ligne (on peut aussi supprimer cet espace en mettant le line-height à 0).

Pour le positionnement relatif, il garde sa position originale dans le flux, ce qui peut rapidement causer des problèmes. C'est pourquoi on ne l'utilise que dans des rares cas, et pour des déplacements de faible distance généralement. Si ça pause des problèmes sur les éléments suivants, c'est qu'il ne faut pas utiliser le positionnement relatif. Ou alors on l'utilise, comme je l'ai fait, juste comme référence sans déplacement pour un positionnement absolu plus loin.
Modifié par kustolovic (06 Jan 2014 - 00:14)
Vraiment merci pour ta réponse, j'ai bien compris les points qui étaient flous Smiley biggrin
Je vais continuer de bosser tout ça, encore merci à toi Smiley smile
Sujet clos
Aller à