CSS: position absolu ou display grid ?

Signaler
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
-
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
-
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 ?

5 réponses

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).
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
1
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.
Messages postés
1009
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
21 février 2021
85
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
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
1
Justement, ma question consistait à savoir ce qu'il était le plus approprié d'utiliser, et dans quelles circonstances.
Merci pour les liens!
Messages postés
1009
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
21 février 2021
85
Salut,

Je pense que flex est bien pour le responsive pc et mobile. Grid a l'air correct pour ce que tu souhaites. Mais, il faut tester, et voir comment est le rendu sur un smartphone en mode portrait.
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
1
Je vais essayer de voir ça, merci à toi pour tes conseils !