style - link css to html

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

Question

Estaba desarrollando una página web, donde estaba diseñando un tablero para un juego similar 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 del tablero sería mucho, mucho más fácil de hacer bien ... y lo era.

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

Answer 1

Algunas cosas son imposibles de hacer sin 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). Entonces, mi consejo: solo usa el que se ajuste a tus necesidades ...

Answer 2

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).

Usar el posicionamiento absoluto es mucho más rígido y hace que sea difícil escribir diseños que respondan bien al contenido cambiante. 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 3

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

Ahora, en tu situación, esto 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 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 4

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.

Una vez 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 5

Me parece que soy el único aquí que estoy totalmente en desacuerdo con la suposición de que la postulación absoluta no es una mala práctica. Excepto condiciones como la animación o elementos que deberían sentarse específicamente en un lugar "inusual" en sus padres, el posicionamiento absoluto rompe la estructura de su HTML (que es exactamente lo que HTML supone definir en mi opinión) porque puede 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 absoluta 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 esqueleto de 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! Hacer el tablero con la mesa sería mucho más fácil y correcto (después de todo esto es una tabla) ... Y personalmente lo haría con una clase de cube que habría float: left (con clear en cada noveno cubo)

¡El posicionamiento absoluto de 64 cuadrados diferentes es una locura!

Answer 6

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 cual el uso del posicionamiento absoluto se considere una mala práctica.

Answer 7

Mire su sitio web en diferentes navegadores bajo las siguientes condiciones:

• Cambia la configuración de tu sistema operativo a fuentes de alto dpi / grandes / alto contraste (todas cambian el tamaño de la fuente predeterminada del navegador)
• Aumentar / disminuir el tamaño de fuente predeterminado en el navegador
• Anular las fuentes de página en el navegador (generalmente en algún lugar de las opciones de accesibilidad)
• Anular / desactivar la hoja de estilo de la página (concedido, los usuarios no deberían esperar que un juego de ajedrez funcione 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 8

No hay reglas duras y rápidas. Las diferentes formas de posicionamiento son buenas en diferentes cosas.

La mayoría 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 9

No responde tu pregunta, pero ...

Para un ajedrez como un tablero de juego, creo que también puedes usar una mesa.
Después de todo, es columnas y filas que está mostrando.

Ahora sé que mucha gente empieza a gritar "no uses tablas" y "las mesas 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 10

OMI, no es algo malo en absoluto. Recientemente he completado una tarea con el cumplimiento de las normas de AA y apoyo para FF2, IE7, IE6 (sí, un dolor que conozco). ¡Había ciertos diseños que solo se podían 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 11

Para un juego de ajedrez como el que estás 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 estuviera 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.

Una vez dicho esto, un beneficio menos conocido del posicionamiento absoluto es que permite el posicionamiento absoluto localizado dentro de un elemento parental (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 está ubicado 20px desde la izquierda y 20px 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.

Entonces, 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 12

Tenga en cuenta también que el posicionamiento absoluto no solo se utiliza para posicionar cosas relativas a la ventana del navegador, sino que también se usa para ubicar 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 posiciona en el contexto del primer elemento ancestro que tiene position:relative o position:absolute . Entonces, si tienes 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 el Container , no a la página.

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