CSS índice z: unha visión xeral, propiedades

Regra CSS índice z - páxina posición elemento coordinada Z: o nivel do elemento de visualización ou capa na que está situada. Tag que Índice z maior aparecerá na súa totalidade. Tags aparecen na orde na que aparecen no fluxo de entrada e se sobrepoñen. приоритет видимости. valor de Z-Índice determina a prioridade visibilidade.

Debemos prestar homenaxe aos navegadores e elementos de algoritmos de visualización. Desde os días en gráficos e pantallas capturadas formadas partes problema recorte visibles e invisibles dos elementos na vista da aplicación, o contido tecnoloxía de visualización visible alcanzou excelentes resultados. Nunha ventá do navegador, todos os elementos aparecen correctamente, o usuario ve só o que está especificado deseño ou creador.

A regra xeral: a orde eo nivel de

O fluxo de entrada (Páxina servidor formado) secuencialmente le o navegador. Todas as etiquetas aparecen segundo as regras CSS e poden sobrepasar.

Este exemplo describe catro elemento visible. Cada sucesiva igual unha anterior. En lugares onde as etiquetas son cruzados, non é unha cuestión de prioridade. Como norma xeral z índice etiquetas CSS para todos estes mesma e igual a 848, será evidente que o elemento que é o seguinte. Todo o que espreita para fóra en cada unha o seguinte elemento aparentemente.

visibilidade regra

Navegadores observar as normas de visibilidade só "xusto". Para chegar a un algoritmo que permite analizar toda a imposición bruta e utilizar só os que realmente se cruzan, excluíndo aquelas partes que son absorbidos por cada elemento sucesivo - é moi difícil.

Na maioría dos casos isto non é necesario. equipamento moderno é moi rápido, e teña en conta redeseñar elemento para o punto onde pode bloquear o seguinte elemento, é moi problemática.

Influencia sobre a matriz elemento

É suficiente para a terceira etiqueta scCSS3 aumentar o índice z, e en scCSS4 - reduci-lo, a imaxe total é modificado. A secuencia de elementos no fluxo segue sendo a mesma:

• id= 'scCSS1'; div id = 'scCSS1'
• id= 'scCSS2'; div id = 'scCSS2'
• id= 'scCSS3'; div id = 'scCSS3'
• id= 'scCSS4'. div id = 'scCSS4'.

Débese notar que a segunda imaxe é realmente ocupa máis espazo do que parece. O terceiro cadro é o mesmo. Ademais, está composto de dúas partes (dous ovos) a unha distancia un do outro.

O tamaño real das rexións, que ocupan as segunda e terceira imaxes realzados en amarelo e gris respectivamente.

A combinación de índice z cor de fondo

Debe notarse que as propiedades de fondo CSS & z índice complementan un ao outro. Todos os elementos de bloque, e calquera outro, sempre ocupar unha área rectangular formada por altura máxima ea anchura máxima do contido.

Usando imaxes, pode facer calquera elemento campo de formulario, pero ao redor del, sempre haberá un rectángulo. É un feito que é importante ter en conta adecuadamente.

Pode poñer o texto en forma camiño seleccionado, pero se non fai iso, o contido fica a calquera elemento nunha caixa rectangular, sucesivamente, tras a recepción da entrada.

Uso propiedades CSS índice z no elemento cuxa cor de fondo valor é transparente (un tipo de transparencia), pode emular calquera elemento do circuíto. Aínda que en calquera caso, o elemento realidade é rectangular.

Eventos e elementos visibles

En lugares onde o elemento está bloqueado por outro elemento, os eventos que non vai funcionar. Como regra xeral, se o elemento está fóra de vista, é tamén a zona de dispoñibilidade.

Un creador quere bloquear o botón ou elemento de menú, pode moi ben ser colocado sobre a etiqueta bloqueo outra etiqueta, quizais un transparente (por exemplo, mediante a regra de opacidade CSS), pero en calquera caso, ter un z-index maior CSS.

Desde o evento, do punto de vista do usuario, pode ser dividido en pertinente e non ten ningún, entón o último (movendo o rato, premendo botóns aleatorios no teclado, o sinal automático) pode ser usado para cambiar adecuadamente o contido da xanela do navegador.

Un exemplo simple: un visitante se moveu o punteiro do rato sobre o elemento de menú, pero aínda non decidiu facer algo. O creador pode fornecer un evento para rastrexar o movemento de diálogo para o punto desexado (clic - un visitante decide) e mostrar un contido adecuado. Regra CSS z-index é o máis adecuado para a ocasión.

formato de imaxe

Desde imaxes son un material de construción importante para calquera sitio (beleza, modernidade, funcionalidade - é a norma habitual das cousas), é de gran importancia para as opcións de formato de imaxe.

En xeral, pode utilizar toda a variedade de formatos existentes, pero en termos de práctica e eficacia é moi razoable para confinar * .png para imaxes fixas e * .gif - para imaxes animadas. * .jpg Popular tamén é bo, pero non permite a flexibilidade necesaria para manipular o espazo de exposición.

erros do navegador eo creador

Non tan frecuentemente o caso, cando o CSS z-index non funciona, pero pasa. Condicións de follas de estilo en cascada sempre funciona, eo volume de ficheiro de estilo miúdo chegar a volumes significativos. Cando algo non aparece, ou simplemente non teñen o que debe ser, que primeiro comprobar o seu propio código, a continuación, limpar a caché do navegador e probar o seu propio código de novo.

Interpretar HTML e CSS, o navegador é apenas comete erros - é un axioma. Se o elemento non acontecer, entón, no deseño do CSS {position: Absolute; Índice z: 112,233; left: 10px; superior: 20 p; } ... algo falta ou non rexistrado.

O erro máis común - elemento errado Mostrado falta unha referencia a súa visibilidade en condicións absoluta ou relativa. Ás veces pode traballar para especificar o estilo directamente sobre o elemento e non é o seu estilo. Neste último caso, é unha saída, pero está falando principalmente sobre algún tipo de erro no código.

Estilo debe ser no estilo de clase ou ID. Apuntando estilo no elemento debe só en casos excepcionais.

Usando jQuery.css (índice z, 123) tamén pode conducir a un erro, se non é aplicada para a clase ou identificador. Ademais, jQuery - unha ferramenta de desenvolvemento verdadeiramente notable. Con todo, antes de aplicala lo, non ferir a pensar: Será que é posible prescindir improvisado significa HTML / CSS, z-index - non é unha regra que non require atención inmediata.

movemento correcto das capas lóxicas, e

Perfect Page - plana. En calquera caso, antes de que a imaxe tridimensional real no extremo grande escala, e non nesa necesidade particular. sitios modernos - é un tarefas de experiencia real, no mundo real. Eles só precisan traballar ben e amosar unha imaxe tridimensional plana.

By the way, o fenómeno da páxina de destino (páxina de destino) en forma de opcións de "creación de sitios" - a mellor proba de que a forma plana rectangular e seco, pero moi contido que - tamén é bo e práctico. Pero hai que ter en conta que os sitios das empresas de monopolio preso ao seu principal - a cara da empresa, a súa funcionalidade e poder de produción. Tecnoloxía da Información Monstros sentiu que as páxinas de destino - é as pequenas empresas enfróntanse, accesorios, Herbalife e outras "xoias".

Guste ou non, de feito correcta, o futuro vai amosar. É importante que non só ten sentido para pintar no contido capas, pero tamén para garantir a circulación adecuada entre eles a calquera variante de construción dun sitio web.

Excelente solución - AJAX (páxina é actualizada corresponda). Mesmo solución máis prometedora, cando a páxina mostra que é necesario, neste punto da xanela do navegador.

De feito, z-index - este sinxelo CSS regra. A súa finalidade - para amosar o nivel da etiqueta para que o navegador pode determinar cando o elemento de exhibición e que parte deste elemento visible. Capa e da páxina - unha noción moi relativa, xa que é problemático para proxectar a páxina e ter presente o sentido da regra z-index para diferentes exhibición de contidos.

Normalmente, un creador escolle un número favorito, e dalo a todas as etiquetas nunha liña, eo feito de que temos que estar de algunha maneira para fóra, atribúe o seguinte número. Atribúen importancia para as capas e niveis de páxinas - non é particularmente prácticas progresistas e prometedores.

Con todo, se o movemento semántica índice z para un diálogo co visitante, que é posible para crear un efecto práctico. Semellante á forma como as etiquetas poden ser traspasadas unhas sobre as outras, é posible impor un diálogo (visitante do sitio) e realizar o movemento entre eles. Desde esta perspectiva, a aplicación das normas de CSS z-index parece ser moi viable e práctico.