634 Shares 1798 views

Posición Relativa – ¿Qué es? Descripción detallada

El diseño HTML es un proceso largo, escrupuloso, pero muy creativo. A pesar del hecho de que para la mayoría de las personas que trabajan en el campo de TI, el diseño de las páginas web puede parecer una rutina aburrida, los especialistas con una vocación para tal cosa no sólo realizar tareas cualitativamente, sino también recibir placer tangible del proceso en sí.

Sin embargo, antes de convertirse en un diseñador web experimentado, cada novato pasa mucho tiempo aprendiendo varias instrucciones y especificaciones para el lenguaje HTML y su aliado CSS. Es acerca de lo que es CSS, para qué sirve y qué "feints with ears" te permite levantarte, y también acerca de una de sus propiedades populares – Position Relative – hablaremos hoy.

¿Qué es CSS?

La abreviatura CSS puede ser descifrada y traducida al ruso como "hojas de estilo en cascada". Suena bastante extraño – por un lado, como las palabras y comprensible, pero por el otro – el significado general no se coge de inmediato. Comencemos con estilos simples. Esta tecnología le permite dar a los objetos en la página ciertas características relacionadas con la apariencia, que se pueden prescribir una sola vez, pero se utilizan un número infinito de veces.

La palabra "tablas" en la traducción oficial resultó ser casi accidental, de hecho, sería más apropiado usar la palabra "hojas" o "listas", pero los autores de la traducción original decidieron que la CSS se parece más a una lista que a una lista De tal manera que ahora son juzgados.

Finalmente, la palabra "cascada". El hecho es que cada elemento puede tener varios estilos a la vez, que pueden ser mezclados o incluso intersecados. En tales casos, el navegador tiene que recurrir a una serie de reglas, para poder componer correctamente la apariencia del bloque, que tiene varios estilos, con uno de ellos, por ejemplo, tiene la propiedad de Posición Relativa, y el otro – Posición Absoluta. De hecho, tales conflictos no pueden ser tolerados, pero en grandes proyectos tal confusión ocurre bastante a menudo.

Por lo tanto, ahora que el nombre es claro, veamos un ejemplo sencillo. Digamos que usted tiene un gran número de botones en su sitio web que están diseñados de una manera determinada. Tienen propiedades tales como tamaño, sombra, transparencia, color. Por supuesto, puede especificar estos parámetros, creando cada botón, pero será mucho más fácil de usar CSS. En la práctica, es necesario describir una clase en la que se enumerarán los valores de todas las propiedades anteriores y, a continuación, en lugar de una larga enumeración, la etiqueta de cada botón sólo tendrá que especificar el nombre de esta clase, después de lo cual el navegador pintará estos elementos en los colores necesarios y darles la adecuada "Brillo".

¿Por qué necesito la propiedad Posición?

Ahora vamos a pasar directamente a la propiedad Posición, para la que se concibió todo el artículo. Si está familiarizado con el inglés o tiene una buena intuición, entonces ya debe entender – esta propiedad es responsable de la ubicación del elemento. De hecho, es, pero en lugar de definir un lugar en particular, esta propiedad le dice al navegador cómo colocar exactamente un elemento en relación con el vecino o toda la página como un todo.

¿Qué valores puede tomar la propiedad Posición?

Nuestra propiedad puede tomar varios valores diferentes, sólo hay cinco de ellos. He aquí una breve descripción de cada uno de ellos:

  • Posición Heredar. Esta propiedad le permite copiar los datos de posición del elemento que es el padre. Por ejemplo, si tiene una div con la posición relativa relativa, el IMG con el valor heredado también obtendrá el valor Relative.
  • Posición estática. Este valor se da automáticamente a todos los elementos, a menos que se especifique lo contrario. Los elementos encajan en la posición como se mencionan en el código y no están disponibles para varias "delicadezas" que les permiten cambiar su posición.
  • Posición Absoluta. Este valor de la propiedad Position se suele utilizar en los casos en que es necesario crear un elemento "flotante". Al tener este valor de propiedad, el elemento permanece "invisible" para el resto de la página. Es decir, se encuentran como si nuestro elemento absoluto no existiera en absoluto. Él mismo siempre permanecerá en el lugar, independientemente de hasta qué punto la página fue desplazada.
  • Posición fija. En muchos aspectos, este valor es similar al anterior, sin embargo, mientras que el elemento absoluto está unido al padre, fixed usa sólo las coordenadas de la esquina superior izquierda de la pantalla del navegador, sin prestar atención a otros elementos que lo precedieron.
  • Finalmente, Posición Relativa. Este tipo de valor le permite posicionar el elemento en relación con los demás, lo que puede ser útil al crear un marcado adaptativo, llamado "caucho" en la gente común. Al tener esta propiedad, el elemento se "separará" del resto, sin perder la capacidad de cambiar su ubicación en la página.

Características del trabajo con Posición en diferentes navegadores

No todos los navegadores son igualmente compatibles. Mientras que la mayoría de los programas alternativos para navegar por Internet sin ningún enganche perciben el valor de Posición es absolutamente cierto, "crónicamente especial" Internet Explorer considera esta propiedad en función de su versión.

Por ejemplo, usando el navegador IE6 ya enterrado, no puedes usar los valores Fijos e Inherit – el burro simplemente los ignora. Sin embargo, a pesar de que desde la séptima versión la situación comenzó a ser corregida, y Fixed ya se estaba procesando, para heredar a todo el mundo le gustaba el "buscador para descargar otros navegadores" solo en su octava forma.

El resto de los críticos manejan tranquilamente Posición desde las primeras versiones, con la excepción de Opera, que adquirió el soporte de esta propiedad en sus 4 variaciones, lanzadas a mediados de los 90's.

Trabajar con Posición en Javascript

De hecho, la historia de cómo trabajar con la propiedad Posición en Javascript, incluimos sólo por el bien de la propiedad. Dado que esta propiedad no tiene ningún carácter especial en el nombre, puede utilizar JS sin ningún cambio, por ejemplo, para establecer la posición relativa div, debe incluir esta línea: div.style.position = 'relative'.

Como puedes ver, todo es bastante simple.

¿Por qué la posición relativa merece una atención especial?

Si bien la mayoría de los valores de la propiedad Position, por decirlo suavemente, "escupen" los elementos circundantes, usando el valor "style position: relative", siempre vale la pena recordar toda la página como un todo, porque su uso incorrecto puede distorsionar fuertemente todo el contenido de la pantalla .

Además, sólo esta propiedad le permite convertir fácilmente un diseño fijo en uno adaptable, ya que su aplicación afecta automáticamente a todo el contenido de la página. A continuación, todavía tenemos tiempo para considerar ejemplos y errores de usar este valor, y verá su valor tangible en la práctica.

¿Cuándo debo usar el posicionamiento relativo?

Además de la disposición de las páginas HTML convencionales, Position Relative se utiliza a menudo para crear diversos efectos interesantes. Por ejemplo, si desea que un elemento "venga" a una página o, por el contrario, vaya suavemente por sus bordes, esta propiedad le puede ayudar a realizar esta "finta".

Similares trucos se implementan a través de Javascript, o, si se están esforzando por el diseño progresivo, a través de las propiedades de CSS3, que le permiten configurar un cambio cíclico en el valor de una variable.

Además, en algunos casos, es posible crear valores relativos de posición "híbridos". CSS, aunque no le permite establecer simultáneamente algo como position: absoluta relativa, pero con algunos trucos, todavía se puede lograr este efecto. Este enfoque puede ser útil en aquellos casos en que es necesario crear algo como una descripción de herramientas complejas o un menú contextual. Teniendo en cuenta los ejemplos, ciertamente describiremos la estructura de tal "híbrido".

Ejemplos de uso de posicionamiento relativo

Position Relative es una herramienta bastante simple pero flexible que te permite implementar muchos efectos interesantes. Con el fin de no perder tiempo y espacio en escribir códigos de plantilla inútiles, le damos algunos algoritmos verbales que pueden decorar su sitio o sus páginas individuales.

Comencemos con la línea "running out". Supongamos que usted necesita un elemento que "viajará" por detrás del borde izquierdo de la pantalla y gradualmente se moverá hacia su lado derecho. Para implementar este "mecanismo", debe establecer la posición: relative; Izquierda: -100px, donde -100 es el número aproximado de píxeles que forman el ancho del bloque. Este estilo le permitirá ocultar el bloque fuera de la pantalla, colocándolo en la "posición inicial". Ahora puede utilizar un script que incremente el valor de la propiedad izquierda cada pocos milisegundos hasta que se convierta en igual al ancho de la ventana del navegador menos el ancho del elemento. Como resultado, obtendremos un bloque que aparece por detrás del borde izquierdo, rodado por toda la pantalla y "aparcado" en su lado derecho.

Otro ejemplo le permite crear elementos "relativamente absolutos". Por ejemplo, puede ingresar un absoluto dentro de otro que tenga un Relativo de posición. Como resultado, tenemos un bloque "relativo" que no tiene un tamaño, en el cual se inscribe un absoluto, capaz de manifestarse en una posición que depende de los elementos que la preceden.

Errores comunes al usar la posición relativa

El error más común al usar Position Relative es que muchos diseñadores de diseño se olvidan de la capacidad de reservar espacio para un bloque que puede estar en cualquier lugar. Por ejemplo, si usted tiene un bastante grande, colocado fuera de la pantalla y con un posicionamiento relativo, un "agujero" aparecerá en su lugar. Sin embargo, incluso esta propiedad, a veces creando ciertos inconvenientes, puede usarse para bien, por ejemplo, creando un efecto interesante de un sitio de "auto-recolección" en el que todos sus bloques se colocan gradualmente en la parte superior: posición 0; Izquierda: 0; Es decir, en su lugar original.