CSS: position absolu ou display grid ? Fermé

Question

Bonjour, j'ai vu qu'il était possible de positionner des éléments sur une page web de plusieurs manières, entre autre en utilisant un
position: absolute;
ou bien un
display: grid;

Si je souhaite disposer mes éléments d'une certaine manière sur ma page, par exemple de cette manière:


Y a t-il une méthode à préférer entre la position absolue et un display grid ?

Tama · Answer

Salut,
non.
Ce sont 2 propriétés différentes, elles ne s'excluent pas d'ailleurs.
ça dépends donc du contexte(les éléments à positionner, la mise en page voulue) et de vos habitudes de mise en page.

"de positionner des éléments sur une page web de plusieurs manières"
Certes, c'est un langage. Il existe bien des manières de positionner des éléments.*
Les propriétés que vous évoquez ne suffise pas pour cela d'ailleurs.
Avec position absolue le placement se fait à partir des positions des côtés de la page, avec display grid le placement se fait en 'grille".

Le placement avec la position absolute à pour avantage de ne pas tenir compte du flux du document(ordre des éléments par rapport aux uns aux autres) et comme inconvénient de ne pas tenir compte du flux du document.

en display:grid;
grid  Displays an element as a block-level grid container

https://www.w3schools.com/CSSref/pr_class_display.asp
Positionner en "grille" me semble assez complexe dans la plupart des cas.
C'est un choix, tout dépends des éléments à positionner.

Quant à la propriétés position en CSS elle a bien d'autres valeurs possibles(display aussi) qui permettent le positionnement.

Côté positionnement il y a beaucoup de propriétés CSS qui peuvent servir, tout un tas de méthodes(faites quelques recherches positionnement CSS).

Par exemple du côté des marges et des propriétés de display(inline par exemple) ou même en utilisant float, ce sont aussi d'autres possibilités de positionnement qui peuvent être pratique(aboutir à un résultat le plus simplement et avec le moins à écrire possible).


"Si je souhaite disposer mes éléments d'une certaine manière sur ma page, par exemple de cette manière:"

Oui donc avant tout séparer l'affichage du contenu. écrivez le HTML. Apprenez CSS éventuellement.
Il n'y a pas de méthode magique mais c'est un langage(descriptif) CSS, il permet de manipuler les éléments HTML, de faire leur mise en page.
Et pour ça il faut écrire CSS, tout d'abord restez dans le flux du document pour faire une mise en page histoire d'apprendre les bonnes façons avant d'aller vers des exceptions(possibles mais pas la règle).

charline159 · Answer

Je vois, merci pour cette réponse détaillée. J'essayerai d'utiliser un maximum ces deux outils afin de les distinguer au mieux, pour pouvoir les choisir dans la situation qui s'y prête le mieux.

dachiasse · Answer

Salut,

Je mets un coup de pied dans la fourmilière. Pourquoi pas flex ? Il est bien intégré à CSS comme grid et il est très puissant.
Un lien de la bible du CSS : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Un lien francophone d'un bon site de création Web : https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

charline159 · Answer

Justement, ma question consistait à savoir ce qu'il était le plus approprié d'utiliser, et dans quelles circonstances.
Merci pour les liens!

charline159 · Answer

Je vais essayer de voir ça, merci à toi pour tes conseils !

CSS: position absolu ou display grid ?

5 réponses

Discussions similaires