Posição relativa – o que é? descrição detalhada

HTML nidificação – um processo longo e rigoroso, mas muito criativo. Apesar do fato de que para a maioria das pessoas empregadas em TI, layout de páginas da web pode parecer rotina chata, especialistas que têm uma vocação para tal caso, não só qualitativamente realizar a tarefa, mas também recebem a partir do processo de prazer tangível.

No entanto, antes de se tornar um programador experiente, cada recém-chegado passa muito tempo estudando as várias instruções e especificações tanto da linguagem HTML, e em seu aliado – CSS. Sobre exatamente o que CSS, o que é e o que "orelhas finta" permite que você se levantar, bem como uma de suas propriedades superiores – Posição Relativa – hoje vamos falar.

O que é CSS?

Sigla CSS pode ser transcrita e traduzida em russo como "folhas de estilo em cascata". Parece muito estranho – por um lado, parece claro, e as palavras, e, por outro – o significado geral não é imediatamente capturado. Vamos começar com o simples – com estilo. Esta tecnologia permite anexar objetos na página, certas características sobre a aparência de que você só pode registrar uma vez e usar um número infinito de vezes.

A palavra "mesa" na tradução oficial apareceu quase por acidente – na verdade mais apropriada seria a usar a palavra "listas" ou "listas", no entanto os autores da tradução original decidiram que a CSS parece mais do que uma lista, e quem somos nós tal é agora a experimentá-los.

Finalmente, a palavra "Cascade". O fato é que cada elemento pode ter vários estilos que podem ser misturados ou mesmo se sobrepõem. Nesses casos, o navegador tem de recorrer a um conjunto de regras, a fim de compor a aparência do bloco, que acabou por ser de vários estilos, com um deles, por exemplo, tem uma posição de propriedade relativa, e os outros – posição absoluta. Na verdade, esses conflitos não podem ser tolerados, mas em grandes projectos tal confusão acontece com bastante frequência.

Então, agora, quando tudo está claro a partir do nome, vamos olhar para um exemplo simples. Vamos dizer que seu site deve ser um grande número de botões, projetado em uma determinada maneira. Eles têm propriedades, como tamanho, sombra, opacidade, cor. Claro, você pode especificar esses parâmetros, criando cada botão, mas é muito mais fácil de usar CSS. Na prática, você precisa descrever uma certa classe, que lista os valores de todas as propriedades acima, e depois, em vez de uma longa lista, a tag de cada botão só precisará especificar o nome da classe, em seguida, o próprio navegador irá colorir esses elementos na cor desejada e dar-lhes uma adequada "brilho".

O que significa a propriedade de posição?

Vamos agora seguir diretamente para a posição propriedade, para o bem de que foi iniciado este artigo inteiro. Se você estiver familiarizado com o idioma Inglês, ou ter uma boa intuição, então você já deve ser claro – esta propriedade é responsável pela localização do item. Na verdade, do jeito que está, mas em vez disso determinar a localização específica, esta propriedade diz ao navegador como ele deve ser colocado um ou outro elemento em relação ao lado ou através da página como um todo.

Os valores que podem a propriedade de posição?

Nossa propriedade pode aceitar vários valores diferentes, há apenas cinco. Aqui está uma breve descrição de cada um:

• Herdar posição. Este recurso permite que você copie os dados sobre a posição do elemento que é um pai. Por exemplo, se você tiver um div com um parente posição especificada, em seguida, entrou nele com valor herdar IMG também será definida para Relativa.
• Posição estática. Este valor é dado a todos os elementos automaticamente, a menos que indicado mais. Os elementos se encaixam em posição como mencionado no código e não estão disponíveis para uma variedade de "frescuras", permitindo a mudar a sua posição.
• Posição absoluta. Por este valor a propriedade de posição é muitas vezes usado em casos em que é necessário criar um elemento "flutuante". Com um determinado valor do item propriedade é "invisível" para os outros componentes da página. Ou seja, eles são organizados como se o nosso elemento absoluta não existe. Ele próprio será sempre no lugar, independentemente de quão longe sido página rolado.
• Posição fixa. De muitas maneiras, este valor é semelhante ao anterior, porém, enquanto o elemento absoluta está ligada ao pai, fixo utiliza apenas as coordenadas do canto superior esquerdo da tela do navegador, ignorando o resto dos elementos que a precederam.
• Finalmente, posição relativa. A valores de tipo permite elemento de posicionamento em relação à outra, o que pode ser útil para a criação de uma marcação adaptativo chamado "borracha" comum. Com esta propriedade, o item vai "empurrar" o outro, sem perder a capacidade de alterar a sua posição na página.

Trabalhando com posição em diferentes navegadores

Nem todos os navegadores são igualmente compatíveis. Enquanto a maioria dos programas alternativos para navegar na Internet sem problemas valor de posição percebidos é absolutamente verdadeiro ", cronicamente especial» Internet Explorer considera a propriedade, dependendo de sua versão.

Por exemplo, usando o já "enterrou" o navegador IE6, você não pode usar o valor fixo e Inherit – "burro" eles simplesmente ignorá-lo. No entanto, apesar do fato de que a sétima versão da situação começou a melhorar, e fixa já processado, para Herdar amado "navegador para baixar outros navegadores," chegou apenas em sua oitava encarnação.

O resto dos observadores calmamente lidar posição com a primeira versão, com exceção da Opera, que tem o apoio das propriedades em suas 4 variações, publicado em meados dos anos 90.

Trabalhando com Posição no Javascript

Na verdade, a história de como trabalhar com a propriedade Posição no Javascript está, nós incluímos só por uma questão de decência. Como essa propriedade não tem quaisquer caracteres especiais no título, você pode usar o JS sem quaisquer alterações, por exemplo, para definir a posição div Relativa, deve incluir uma linha como esta: div.style.position = 'relativa'.

Como você pode ver, é muito simples.

Porque Posição méritos relativos atenção especial?

Enquanto a maioria da posição valores de propriedade, para dizer o mínimo, "cuspiu" sobre os elementos circundantes, utilizando o valor "posição estilo: relative", deve sempre lembrar sobre toda a página como um todo, porque o uso indevido pode fortemente "inclinação" todo o conteúdo da tela .

Além disso, esta propriedade só permite converter facilmente adaptável projeto fixo, porque a sua aplicação irá afectar automaticamente todas as páginas de conteúdo. Então ainda temos tempo para analisar os exemplos e erros usando este valor, e você vai ver o seu significado tangível na prática.

Quando você deve usar posicionamento relativo?

Além do layout convencional de páginas HTML, Posição Relativa muitas vezes usado para criar uma variedade de efeitos interessantes. Por exemplo, se você quiser um item "veio" em uma página ou, pelo contrário, gradualmente, foi além do seu território, é precisamente esta propriedade pode ajudá-lo a implementar este "truque".

Esses "truques" são implementadas através de Javascript é, ou, se você apontar para a imposição progressiva, através das propriedades de CSS3, que permitem a você ajustar a mudança cíclica no valor de uma variável particular.

Além disso, em alguns casos possíveis para criar valores "híbridos" posição relativa. CSS, embora não ao mesmo tempo permite que você defina algo como position: relative absoluta, mas usando alguns truques, ainda é possível atingir esse efeito. Esta abordagem pode ser útil em casos em que você precisa para criar algo complexo como uma dica de ferramenta ou menu pop-up. Considerando os exemplos, damos uma descrição da estrutura de uma tal "híbrido".

Exemplos de utilização da classificação relativa

Posição relativa – é bastante simples, mas ferramenta flexível que permite implementar uma variedade de efeitos interessantes. Para não perder tempo e lugar para escrever modelo de código inútil, apresentamos vários algoritmos orais, que pode decorar o seu site ou páginas específicas.

Vamos começar com a linha "run out". Suponha que você tenha uma necessidade de um elemento que vai "viajar" por causa da borda esquerda da tela e, lentamente, movê-lo para o lado direito. Para implementar um "mecanismo" tal deve definir a posição: relativa; esquerda: -100px, onde -100 – o número aproximado dos pixels que constituem a largura do bloco. Este estilo vai permitir que você esconda o aparelho fora da tela, colocando-o na "posição inicial". Agora você pode usar um script que vai aumentar a cada poucos milissegundos deixados valor da propriedade por unidade, desde que não se torne igual à largura da janela do navegador menos a largura do elemento. O resultado é uma unidade que sai da ponta esquerda, rolou em toda a tela e "estacionado" na mão direita.

Outro exemplo permite criar elementos "relative-absolutos". Por exemplo, você pode inserir um absoluto dentro de outro, tendo posição relativa. Como resultado, temos um bloco de "parente" que não tem o tamanho para o qual o absoluto está inscrito, agora é capaz de manifestar-se em uma posição independente do elemento anterior.

erros típicos quando se utiliza Posição Relativa

O erro mais comum quando se utiliza o Relativa posição é que muitos web designers esquecer a capacidade de reservar um lugar na unidade, que pode ser localizado em qualquer lugar. Por exemplo, se você tem uma bastante grande, colocado fora da tela e ter um posicionamento relativo, em seu lugar será um "buraco" de boca aberta. No entanto, mesmo esta propriedade é, por vezes, cria certos inconvenientes pode ser usado para o bem, por exemplo, criando um efeito interessante de "auto-montagem" do site, onde todos os seus blocos estão gradualmente colocado na posição superior: 0; left: 0; t. e. seu local original.