Posición relativa - o que é? descrición detallada

HTML nidificación - un proceso longo e rigoroso, pero moi creativo. A pesar do feito de que a maioría das persoas empregadas en TIC, esquema de páxinas web pode parecer rutina chat, expertos que teñen unha vocación para tal caso, non só cualitativamente realizar a tarefa, pero tamén reciben a partir do proceso de pracer tanxible.

Con todo, antes de se facer un programador experto, cada recén chegado pasa moito tempo estudando as varias instrucións e especificacións tanto da linguaxe HTML, e no seu aliado - CSS. Sobre exactamente o que CSS, o que é eo que "orellas finta" permite que se erguer, así como unha de súas propiedades superiores - Posición Relativa - hoxe imos falar.

Que é CSS?

Siglas CSS pode ser transcrita e traducida en ruso como "follas de estilo en cascada". Parece moi raro - por unha banda, parece claro, e as palabras, e, por outra - o significado xeral non é inmediatamente capturado. Imos comezar co simple - con estilo. Esta tecnoloxía permite achegar obxectos na páxina, certas características sobre o aspecto de que só se pode rexistrar unha vez e utilizar un número infinito de veces.

A palabra "mesa" na tradución oficial apareceu case por accidente - en realidade máis axeitada sería a usar a palabra "listas" ou "listas", con todo os autores da tradución orixinal decidiron que a CSS parece máis que unha lista, e quen somos nós tal é agora a probalo a eles.

Por último, a palabra "Cascade". O feito é que cada elemento pode ter varios estilos que poden ser mesturados ou mesmo se sobrepoñen. Nestes casos, o navegador ten que recorrer a un conxunto de regras, a fin de redactar o aspecto do bloque, que resultou ser de varios estilos, cun deles, por exemplo, ten unha posición de propiedade relativa, e os outros - posición absoluta. En realidade, estes conflitos non poden ser tolerados, pero en grandes proxectos tal confusión ocorre con bastante frecuencia.

Entón, agora, cando todo está claro a partir do nome, imos ollar para un exemplo simple. Imos dicir que o seu sitio web debe ser un gran número de botóns, deseñado nunha determinada maneira. Teñen propiedades, como tamaño, sombra, opacidade, cor. Por suposto, pode especificar eses parámetros, creando cada botón, pero é moito máis doado de usar CSS. Na práctica, ten que describir unha certa clase, que lista os valores de todas as propiedades anteriores, e despois, en vez de unha longa lista, etiqueta de cada botón non necesitará especificar o nome da clase, a continuación, o propio navegador color eses elementos na cor desexada e darlles unha axeitada "brillo".

O que significa a propiedade de posición?

Imos agora seguir directamente á posición propiedade, para o ben de que foi iniciado este artigo enteiro. Se está familiarizado co idioma inglés, ou ter unha boa intuición, entón xa debe ser claro - esta propiedade é responsable da situación do elemento. En realidade, do xeito que está, pero no seu lugar determinar a localización específica, esta propiedade di ao navegador como debe ser colocado nun ou outro elemento en relación ao lado ou a través da páxina no seu conxunto.

Os valores que poden a propiedade de posición?

Nosa propiedade pode aceptar varios valores distintos, hai só cinco. Aquí está unha breve descrición de cada un:

• Herdar posición. Esta característica permite que copiar os datos sobre a posición do elemento que é un pai. Por exemplo, se ten un div cun parente posición especificada, a continuación, entrou nel con valor herdar IMG tamén será definida para relativa.
• Posición estática. Este valor é dado a todos os elementos automaticamente a menos que indica máis. Os elementos se encaixan en posición como mencionado no código e non están dispoñibles para unha variedade de "frescuras", permitindo a cambiar a súa posición.
• Posición absoluta. Por este valor a propiedade de posición é moitas veces usado en casos en que é necesario crear un elemento "flotante". Cun determinado valor do elemento propiedade é "invisible" para os outros compoñentes da páxina. É dicir, son organizados como se o noso elemento absoluta non existe. El propio será sempre no lugar, independentemente de quão lonxe foi Páxina rodado.
• Posición fixa. De moitas maneiras, este valor é semellante ao anterior, pero, mentres que o elemento absoluta está ligada ao pai, fixo utiliza só as coordenadas do canto superior esquerdo da pantalla do navegador, ignorando o resto dos elementos que a precederon.
• Finalmente, posición relativa. A valores de tipo permite elemento de posicionamento en relación á outra, o que pode ser útil para a creación dunha reserva adaptativo chamado "goma" común. Con esta propiedade, o elemento vai "empurrar" o outro, sen perder a capacidade de cambiar a súa posición na páxina.

Traballando con posición en diferentes navegadores

Non todos os navegadores son igualmente compatibles. Mentres a maioría dos programas alternativos para navegar por Internet sen problemas valor de posición entendidos é absolutamente certo ", crónica especial» Internet Explorer considera a propiedade, dependendo da súa versión.

Por exemplo, usando o xa "enterrou" o navegador IE6, non pode usar o valor fixo e inherit - "burro" simplemente ignore-lo. Con todo, a pesar do feito de que a sétima versión da situación comezou a mellorar, e fixa xa procesado, para herdar amado "navegador para descargar outros navegadores," chegou só na súa oitava encarnación.

O resto dos observadores calma tratar posición coa primeira versión, con excepción da Opera, que ten o apoio das propiedades nas súas 4 variacións, publicado a mediados dos anos 90.

Traballando con Posición no Javascript

En realidade, a historia de como traballar coa propiedade Posición no Javascript está, nós incluímos só por unha cuestión de decencia. Como esta propiedade non ten ningún carácter especial no título, pode utilizar o JS sen os cambios, por exemplo, para definir a posición div relativa, incluirá unha liña como esta: div.style.position = 'relativa ".

Como verás, é moi sinxelo.

Porque Posición méritos relativos atención especial?

Mentres a maioría da posición valores de propiedade, para dicir o mínimo, "cuspiu" sobre os elementos circundantes, utilizando o valor "posición estilo: Relative", que sempre lembrar sobre a páxina como un todo, xa que o uso indebido pode fortemente "inclinación" todo o contido da pantalla .

Ademais, esta propiedade só permite converter facilmente adaptable proxecto fixo, porque a súa aplicación afectará automaticamente todas as páxinas de contidos. Entón aínda temos tempo para analizar os exemplos e erros usando este valor, e vai ver o seu significado tanxible na práctica.

Cando usar posicionamento relativo?

Ademais do deseño convencional de páxinas HTML, posición relativa moitas veces usado para crear unha variedade de efectos interesantes. Por exemplo, se quere un elemento "veu" nunha páxina ou, pola contra, gradualmente, foi máis aló do seu territorio, é precisamente esta propiedade pode axudar a aplicar este "truco".

Eses "trucos" son aplicadas a través de Javascript é, ou, se apuntar á imposición progresiva, a través das propiedades CSS3, que permiten a axustar o cambio cíclica no valor dunha variable particular.

Ademais, nalgúns casos posibles para crear valores "híbridos" posición relativa. CSS, aínda que non ao mesmo tempo permite que estableza algo position: Relative absoluta, pero usando algúns trucos, aínda é posible acadar este fin. Esta visión pode ser útil en casos en que precisa para crear algo complexo como unha información de ferramenta ou menú emerxente. Considerando os exemplos, damos unha descrición da estrutura dunha tal "híbrido".

Exemplos de utilización da clasificación relativa

Posición relativa - é moi sinxelo, pero ferramenta flexible que permite aplicar unha variedade de efectos interesantes. Para non perder tempo e lugar para escribir modelo de código inútil, presentamos varios algoritmos orais, que pode decorar o seu sitio web ou páxinas específicas.

Imos comezar coa liña "run out". Supoña que teña unha necesidade dun elemento que vai "viaxar" por mor da beira esquerda da pantalla e, lentamente, mover para o lado dereito. Para aplicar un "mecanismo" tal debe definir a posición: relativa; esquerda: -100px, onde -100 - o número aproximado de píxeles que constitúen o ancho do bloque. Este estilo vai permitir que esconda o aparello fóra da pantalla, colocándose na "posición inicial". Agora pode utilizar un guión que vai aumentar a cada poucos milisegundos deixados valor da propiedade por unidade, sempre que non se faga igual á anchura da xanela do navegador menos o ancho do elemento. O resultado é unha unidade que sae da punta esquerda, rolou en toda a pantalla e "estacionado" na man dereita.

Outro exemplo permite crear elementos "Relative-absolutos". Por exemplo, pode inserir unha absoluta dentro doutro, tendo posición relativa. Como resultado, temos un bloque de "parente" que non ten o tamaño ao que o absoluto está inscrito, agora é capaz de manifestar-se nunha posición independente do elemento anterior.

erros típicos cando se utiliza posición relativa

O erro máis común cando se utiliza o Relativo posición é que moitos web deseñadores esquecer a posibilidade de reservar un lugar na unidade, que pode ser localizado en calquera lugar. Por exemplo, se ten unha moi grande, posto fóra da pantalla e ter un posicionamento relativo, no seu lugar será un "buraco" de boca aberta. Con todo, mesmo esta propiedade é, por veces, crea certos inconvenientes se pode usar para o ben, por exemplo, creando un efecto interesante de "auto-montaxe" da web, onde os seus bloques están gradualmente colocado en posición superior: 0; left: 0; t. e. o seu lugar orixinal.