¿Se considera una mala práctica utilizar el posicionamiento absoluto?

Question

Estaba desarrollando una página web, donde estaba diseñando un tablero para un juego parecido al ajedrez, junto con un par de bandejas de piezas. Todo se hace usando HTML (con jQuery para la actualización dinámica a medida que se juega el juego). En alguna parte tuve la idea de que el uso del posicionamiento absoluto de los elementos dentro de una página se consideraba una mala práctica, y que era preferible utilizar el posicionamiento relativo.

Después de luchar con el posicionamiento relativo durante demasiado tiempo, me di cuenta de que el posicionamiento absoluto de los elementos de la placa sería mucho, mucho más fácil de hacer bien ... y lo era.

¿Alguien conoce una razón por la cual el posicionamiento relativo es preferible a lo absoluto? ¿Hay alguna guía o regla general que aplique al decidir qué enfoque tomar?

Answer 1

Para un juego de ajedrez como el que está desarrollando, no hay nada intrínsecamente incorrecto con el uso del posicionamiento absoluto. Como dijiste, el posicionamiento relativo y el diseño de flujo normal hacen que este tipo de tarea sea bastante difícil.

Por supuesto, si estaba desarrollando un sitio web más estándar, como un sitio que proporciona algún servicio público, el posicionamiento absoluto anula el diseño de flujo predeterminado de los navegadores y por lo tanto reducirá la accesibilidad para muchos usuarios. En este caso, lo evitaría.

Dicho esto, un beneficio menos conocido del posicionamiento absoluto es que permite el posicionamiento absoluto localizado dentro de un elemento principal (relativamente posicionado). Para explicar:

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

Aquí, childDIV es su posición real 20 píxeles desde la izquierda y 20 píxeles desde la parte superior de parentDIV, NO el documento general. Esto proporciona un buen control preciso sobre los elementos anidados en una página, sin sacrificar el diseño de flujo de la página en general.

Para responder a su pregunta (el posicionamiento relativo es preferible al absoluto): no creo que haya una respuesta correcta, depende de lo que necesite construir. Sin embargo, en el posicionamiento general (absoluto o relativo) frente al diseño de flujo predeterminado, mi enfoque es el descrito anteriormente.

Answer 2

El posicionamiento relativo es agradable si puede obtener un diseño totalmente fluido, ya que se verá razonable en una amplia gama de resoluciones de pantalla.

Dicho esto, es bastante frecuente encontrar (especialmente cuando se trata de la compatibilidad de varios navegadores con versiones anteriores), que los diseños totalmente fluidos son difíciles de corregir. Volver a la posición absoluta no debe ser mal visto, la mayoría de los desarrolladores web mortales lo hacen todo el tiempo.

Answer 3

mirada a su sitio web en diferentes navegadores bajo las siguientes condiciones:

• cambiar su configuración del sistema operativo de alta dpi/fuentes grandes/alto contraste (todo cambiar el tamaño de la fuente del navegador por defecto)
• Aumentar/disminuir el tamaño de fuente predeterminado en el navegador
• Anular las fuentes de página en el navegador (generalmente en las opciones de Accesibilidad)
• Anular/desactivar la hoja de estilo de la página (concedido, los usuarios no deben esperar una partida de ajedrez trabajar correctamente en este escenario :-))

En general, la posición absoluta es mala cuando tiene elementos en línea con fuentes de tamaño no fijo. Para su escenario, podría funcionar; sin embargo, habrá muchos casos extremos en los que se producirá algo funky.

Answer 4

IMO, nada mal. Recientemente he completado una tarea con el cumplimiento de las normas de AA y apoyo para FF2, IE7, IE6 (sí, un dolor que conozco). ¡Hubo ciertos diseños que solo se pudieron lograr debido a la posición absoluta! Incluso ciertos componentes como botones donde se necesitaban capas (transparencias) solo eran posibles debido a la posición absoluta. Si alguien tiene una mejor manera, por favor remítame a eso.

El posicionamiento absoluto rompe el flujo, si sabemos cómo restringir el flujo (cambiar los coords de los padres a relativo/absoluto) es divertido. No sé sobre navegadores más antiguos (IE6 en sí mismo es un dinosaurio) pero una cosa dolorosa que encontré fue que escribir en PDF (Cute PDF) o abrir con WINWORD (demandarme) da un resultado lamentable.

Answer 5

Mientras estructurar su HTML para que los elementos sigan un orden lógico que tenga sentido cuando se represente sin CSS, no hay ninguna razón por la que usar el posicionamiento absoluto se debe considerar una mala práctica.

Answer 6

No existen reglas estrictas. Las diferentes formas de posicionamiento son buenas en diferentes cosas.

La mayor parte del trabajo generalmente se realiza mejor con posicionamiento estático (es la opción menos frágil), pero el posicionamiento absoluto es muy bueno en ocasiones. El posicionamiento relativo, por otro lado, es algo que nunca he usado excepto la animación (en elementos que están posicionados estáticamente hasta que JavaScript se involucra), estableciendo un bloque contenedor para el posicionamiento absoluto (por lo que el elemento no se mueve en absoluto) y (muy raramente) un empujón de uno o dos píxeles de un elemento.

Answer 7

Algunas cosas son imposibles de hacer sin la posición: absoluta. Otras cosas son MUCHO MÁS fáciles de lograr con el posicionamiento absoluto (supongamos que quiere un botón de abajo a la derecha para "leer más" en un cuadro de altura fija/mínima y no tiene suficiente texto en ese cuadro). Por lo tanto, mi consejo: sólo tiene que utilizar el que se adapte a sus necesidades ...

Answer 8

No responde a su pregunta, pero ...

Para un juego de ajedrez como juego de mesa Creo que también se puede utilizar una tabla .
Después de todo, es columnas y filas que está mostrando.

Ahora sé que muchas personas comienzan a gritar 'no usar tablas' y 'las tablas son malas'. Sin embargo, las tablas siguen siendo una herramienta válida para mostrar algunos tipos de datos, especialmente columnas/filas de datos organizados.

Answer 9

Tenga en cuenta también que el posicionamiento absoluto no solo se usa para posicionar cosas relativas a la ventana del navegador, sino que también se usa para colocar cosas con precisión dentro de un elemento contenedor. Cuando finalmente entendí esto, después de años de usar CSS, realmente revolucionó mi habilidad para usar CSS eficazmente.

La clave es que un elemento absolutamente posicionado se coloca en el contexto del primer elemento ancestro que tiene position:relative o position:absolute. Así que si usted tiene esto:

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

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

y

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

... el div PositionMe se colocará en relación con Container, no a la página.

Esto abre todo tipo de posibilidades para la colocación precisa en situaciones particulares, sin sacrificar la flexibilidad general y el flujo de la página.

Answer 10

Creo que el problema es que el posicionamiento absoluto es fácil de abusar. Un sistema de coordenadas es mucho más fácil de entender para los profanos que el modelo de caja. Además, programas como Dreamweaver hacen que sea trivialmente simple diseñar una página usando posicionamiento absoluto (y las personas no se dan cuenta de lo que están haciendo).

Sin embargo, para el diseño de página típico, el posicionamiento estático predeterminado debe ser adecuado y realizar el trabajo el 90% del tiempo. Es muy flexible, y al mantener todo en flujo normal, los elementos son conscientes de los otros elementos que los rodean y actuarán de acuerdo cuando cambien las cosas. Esto es realmente bueno cuando se trata de contenido dinámico (que la mayoría de las páginas son estos días).

El uso del posicionamiento absoluto es mucho más rígido y hace que sea difícil escribir diseños que respondan bien a los cambios de contenido. Simplemente son demasiado explícitos. Sin embargo, es perfecto si necesita mover elementos libremente alrededor de una página (arrastrar/soltar), necesita superponer elementos uno encima del otro u otras técnicas de diseño que se beneficiarían de trabajar en un sistema de coordenadas. Francamente, un tablero de ajedrez parece una buena razón para usarlo.

Answer 11

El posicionamiento absoluto es una herramienta, y como cualquier herramienta, se puede usar de buenas y malas maneras. No tiene nada de malo: stackoverflow probablemente lo use para mostrar sus alertas en la barra naranja en la parte superior del sitio.

Ahora, en su caso, tampoco está mal. Pero creo que sería mucho más fácil para ti no usarlo.

Un tablero de ajedrez es una tabla, las celdas de la tabla no necesitan ajustes de posición. Para eventos, onblur/onfocus y cie harán el trabajo. ¿Por qué necesitarías siquiera el cálculo de píxeles?

Así que no te preocupes por la calidad de tu práctica, pero tal vez podrías comprobar si realmente necesitas un posicionamiento absoluto.

Answer 12

Me parece que soy el único aquí que está totalmente en desacuerdo con la suposición de que la positición absoluta no es una mala práctica Excepto condiciones como animación o elementos que deberían sentarse específicamente en un lugar "inusual" donde sus padres , el posicionamiento absoluto rompe la estructura de tu HTML (que es exactamente lo que HTML supone definir en mi opinión) porque puedes lograr resultados que difieren la visualidad de la estructura con mucha facilidad. Además, la implementación del diseño es mucho más difícil y problemática con absoluto porque necesita medir cada elemento y tiene mucho lugar para equivocarse (contra el flujo normal que es mucho más fácil y correcto para la construcción de estructuras de un sitio web)

Y finalmente, con respecto al tablero de ajedrez, ¡creo que la forma más difícil de crearlo es usar la posición absoluta! Haciendo la placa con mesa sería mucho más fácil y derecha (después de todo esto es una mesa) ... Y personalmente lo haría con una clase cube que tendría float: left (con clear en cada novena cubo)

Absoluto posicionamiento de 64 cuadrados diferentes es una locura!