Est-ce considéré comme une mauvaise pratique d’utiliser un positionnement absolu?

Question

J'ai été l'élaboration d'une page web, où j'ai été à la pose d'un conseil pour un jeu d'Échecs comme jeu, avec un couple de la pièce à tiroirs. Tout est fait à l'aide de HTML (avec jQuery pour la mise à jour dynamique comme le jeu est joué). Quelque part j'avais eu l'idée que l'aide au positionnement absolu des éléments dans une page a été considéré comme une mauvaise pratique, et qu'il était préférable d'utiliser le positionnement relatif.

Après avoir lutté avec le positionnement relatif pendant trop longtemps, j'ai réalisé que le positionnement absolu du conseil d'administration éléments serait beaucoup, beaucoup plus facile pour obtenir le droit... et il l'était.

Quelqu'un est-il au courant de la raison que le positionnement relatif est préférable à d'absolu? Existe-il des règles ou lignes directrices de base que vous appliquez au moment de décider de l'approche à adopter?

Answer 1

Pour un jeu d'échecs comme jeu, comme vous l'êtes en développement, il n'y a rien d'intrinsèquement mauvais avec l'aide de positionnement absolu. Comme vous l'avez dit, le positionnement relatif et normal à la disposition de flux effectuer ce genre de tâche assez difficile.

Bien sûr, si vous avez été à l'établissement d'une norme de site web, comme un site offrant quelques de la fonction publique, le positionnement absolu remplace la valeur par défaut disposition de flux de navigateurs et permet de réduire l'accessibilité pour de nombreux utilisateurs. Dans ce cas, je voudrais l'éviter.

Cela dit, une moindre avantage connu de positionnement absolu est qu'il permet localisée positionnement absolu dans un (position relative) de l'élément parent. Pour expliquer:

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute:left:20px;top:20px;">
          I'm absolutely positioned within parentDIV.
    </div>
</div>

Ici, childDIV est en fait positionné 20px à partir de la gauche et de 20px à partir du haut de l' parentDIV, PAS l'ensemble du document. Cela donne un contrôle précis sur les éléments imbriqués sur une page, sans pour autant sacrifier l'ensemble des flux de page en page.

Donc, pour répondre à votre question (positionnement relatif est privilégié par rapport absolu): je ne crois pas qu'il y est une réponse correcte, cela dépend de ce que vous avez besoin pour construire. Cependant, en général, de positionnement (absolue ou relative) par rapport à des flux par défaut de mise en page, mon approche est tel que décrit ci-dessus.

Answer 2

Gardez également à l'esprit que le positionnement absolu n'est pas seulement utilisée pour le positionnement de choses par rapport à la fenêtre du navigateur - il est également utilisé pour le positionnement de choses avec précision à l'intérieur d'un élément contenant. Quand j'ai enfin compris cela, après des années d'utilisation de CSS - il vraiment révolutionné ma capacité à utiliser les CSS de manière efficace.

La clé est que la position absolue de l'élément est placé dans le contexte du premier élément ancêtre qui a position:relative ou position:absolute. Donc, si vous avez ceci:

div.Container
{
   position:relative
   width:300px;
   height:300px;
   background:yellow;
}

div.PositionMe
{
   position:absolute;
   top:10px;
   right:10px;
   width:20px;
   height:20px;
   background:red
}

et

<div class=Container>
...
   <div class=PositionMe>
   ...
   </div>
...
</div>

...la div PositionMe sera placé par rapport à l' Container, pas à la page.

Cela ouvre toutes sortes de possibilités pour un placement précis dans des situations particulières, sans pour autant sacrifier la flexibilité globale et le flux de la page.

Answer 3

Cela ne répond pas à votre question, mais ...

Pour un jeu d'échecs comme un plateau de jeu, je pense que vous pouvez également utiliser une table.
Après tout, ce sont les colonnes et les lignes que vous affichez.

Maintenant, je sais que beaucoup de gens commencent à crier «n'utilisez pas de tableaux» et «les tableaux sont diaboliques». Les tableaux restent toutefois un outil valable pour afficher certains types de données, notamment les données organisées en colonnes / lignes.

Answer 4

Je pense que le problème est que le positionnement absolu est facile d'abus. Un système de coordonnées est beaucoup plus facile pour les laïcs, pour comprendre que le modèle de boîte. En outre, les programmes tels que Dreamweaver faire carrément simple de mise en page d'une page à l'aide de positionnement absolu (et les gens ne réalisent pas ce qu'ils font).

Toutefois, pour la mise en page classique, la statique par défaut de positionnement doit être adéquate et d'obtenir le travail fait 90% du temps. Il est très flexible, et en gardant tout dans le flux normal, les éléments sont conscients des autres éléments autour d'eux, et agira en fonction lorsque les choses changent. C'est vraiment bon, lorsque l'on traite avec du contenu dynamique (dont la plupart des pages sont ces jours-ci).

En utilisant le positionnement absolu est beaucoup plus rigide et rend plus difficile l'écriture des mises en page qui répondent bien à l'évolution des contenus. Ils sont tout simplement trop explicite. Cependant, il est parfait si vous êtes dans le besoin de se déplacer librement éléments d'une page (glisser/déposer), besoin de superposer les éléments les uns au dessus des autres, ou d'autres techniques de mise en page qui aurait l'avantage de travailler sur un système de coordonnées. Franchement, un échiquier sonne comme une bonne raison de l'utiliser.

Answer 5

Regardez votre site dans différents navigateurs dans les conditions suivantes:

• Commutateur de vos paramètres du système d'exploitation à haute résolution/polices de grande taille/de contraste élevé (tout changement de la taille du navigateur par défaut de la police)
• Augmenter/diminuer la taille de police par défaut dans le navigateur
• Remplacer la page des polices dans le navigateur (habituellement quelque part dans les options d'Accessibilité)
• Override/désactiver la page de la feuille de style (accordé, les utilisateurs ne devraient pas s'attendre à un jeu d'échecs pour fonctionner correctement dans ce scénario :-))

En général, la position absolue est mauvais quand vous avez les éléments en ligne avec la non-correction de la taille des polices. Pour votre scénario, il pourrait de travail; cependant, il y aura beaucoup de cas où quelque chose de funky va continuer.