CSS z-index: una visió general, les propietats

Regla CSS índex z - coordinar la pàgina posició de l'element Z: el nivell de l'element de visualització o capa en la qual es troba. Etiqueta que té major índex z es mostrarà en la seva totalitat. Les etiquetes es mostren en l'ordre en què apareixen en el flux d'entrada i la superposició. приоритет видимости. valor d'índex z determina la prioritat visibilitat.

Hem de retre homenatge als navegadors moderns i elements de visualització algoritmes. Des dels dies en què els gràfics i pantalles capturades van formar parts problema de retallada visibles i invisibles dels elements a la finestra d'aplicació, el contingut de la tecnologia de visualització visible ha assolit excel·lents resultats. En una finestra del navegador, tots els elements es mostren correctament, l'usuari només veu el que s'especifica el disseny o desenvolupador.

La regla general: l'ordre i el nivell de

El flux d'entrada (pàgina del servidor format) llegeix seqüencialment al navegador. Totes les etiquetes es mostren d'acord amb les regles CSS i poden solapar-se.

Aquest exemple descriu 04:00 element visible. Cada successiva es superposa a un anterior. En els llocs on es creuen les etiquetes, hi ha una qüestió de prioritat. Com una regla d'etiquetes CSS z-index per a tots aquests mateixa i igual a 848, serà evident que l'element que va com segueix. Tot el que treu el cap per sota de cada un dels següent element, pel que sembla.

visibilitat regla

Navegadors observen les regles de visibilitat única "just". Per arribar a un algoritme que permet analitzar tota la imposició brut i només aquells que realment es creuen s'utilitza, amb exclusió d'aquelles parts que són absorbits per cada element successiu - és molt difícil.

En la majoria dels casos això no és necessari. Els equips moderns és molt ràpid, i l'avís redibuixar element fins al punt en que bloquejarà el següent element, és molt problemàtic.

Influència de la matriu d'element

N'hi ha prou amb la tercera etiqueta scCSS3 augmentar l'índex z, i al scCSS4 - per reduir-lo, la imatge total es canvia. La seqüència d'elements en el corrent segueix sent el mateix:

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

Cal assenyalar que la segona imatge és en realitat ocupa més espai del que sembla. La tercera imatge és la mateixa. A més, es compon de dues parts (dos ous) a una distància uns dels altres.

La mida real de les regions, que ocupen el segon i tercer imatges apareixen ressaltats en groc i gris, respectivament.

La combinació de z-index per background-color

Cal tenir en compte que les propietats de CSS fons i z-index es complementen entre si. Tots els elements en bloc, i qualsevol altre, sempre ocupen una àrea rectangular formada per l'altura màxima i l'amplada màxima del contingut.

L'ús d'imatges, pot fer que qualsevol element de camp de formulari, però al seu voltant sempre hi haurà un rectangle. És un fet que és important tenir en compte adequadament.

Pot posar text en una forma del traçat seleccionat, però si no ho fa, el contingut es posa a qualsevol element en una caixa rectangular, successivament, a la recepció de l'entrada.

Usar les propietats CSS z-index en l'element el valor de color de fons és transparent (una espècie de transparència), pot emular qualsevol element del circuit. Tot i que en qualsevol cas en l'element de la realitat és rectangular.

Esdeveniments i elements visibles

En els llocs on l'element està bloquejat per un altre element, els esdeveniments no funcionaran. Com a regla general, si l'article està fora de la vista, també és la zona de disponibilitat.

Si un desenvolupador vol bloquejar el botó o element de menú, així es pot posar sobre l'etiqueta de bloqueig altra etiqueta, potser un transparent (per exemple, usant la regla de l'opacitat CSS), però en qualsevol cas, tenir un major índex Z de CSS.

Donat el cas, des del punt de vista de l'usuari, es pot dividir en qüestió i no tenir cap, llavors l'últim (que es mou el ratolí, prémer botons a l'atzar en el teclat, el senyal de temporitzador) es pot utilitzar per canviar adequadament el contingut de la finestra del navegador.

Un exemple senzill: un visitant ha mogut el punter del ratolí sobre l'element de menú, però encara no han decidit fer alguna cosa. Podeu trobar l'podria proporcionar un esdeveniment per seguir el moviment de diàleg al punt desitjat (clic - un visitant decideix) i mostrar un contingut adequat. Regla CSS índex z és el més adequat per a l'ocasió.

format d'imatge

Atès que les imatges són un material de construcció important per a qualsevol lloc (bellesa, modernitat, funcionalitat - és la norma habitual de les coses), és de gran importància per a les opcions de format d'imatge.

En general, es pot utilitzar tota la varietat de formats existents, però en termes de practicitat i eficàcia és bastant raonable per confinar * .png per a imatges estàtiques i * .gif - per a imatges animades. * .jpg populars també és bo, però no permet la flexibilitat per manipular l'espai de visualització.

els errors del navegador i el desenvolupador

No tan sovint el cas, quan l'índex Z de CSS no funciona, però passa. Termes de fulls d'estil en cascada sempre funcionen, i el volum d'arxiu d'estil arriben sovint volums significatius. Si no visualitza alguna cosa, o simplement no tenen el que ha de ser, ha de comprovar primer el seu propi codi, a continuació, buidar la memòria cau del navegador i provar el seu propi codi de nou.

Interpretació d'HTML i CSS, el navegador és gairebé no comet errors - és un axioma. Si l'element desitjat no és així, llavors, en el disseny de CSS {position: absolute; z-index: 112.233; esquerra: 10px; la part superior: 20 píxels, } ... alguna cosa falta o no registrat.

L'error més comú - que no procedeixi mostra falta una referència a la seva visibilitat en una posició absoluta o relativa. A vegades pot treballar per especificar l'estil directament sobre l'element i no és el seu estil. En aquest últim cas, és una sortida, però està parlant principalment sobre algun tipus d'error en el codi.

L'estil ha d'estar en l'estil de classe o ID. Assenyalant estil en l'element deu només en casos excepcionals.

Usant jQuery.css (z-index, 123) també pot conduir a un error, si no s'aplica a la classe o identificador. A més, jQuery - una eina de desenvolupament veritablement notable. Abans, però, d'aplicar-lo, es perd res amb pensar: ¿és possible prescindir d'improvisat significa HTML / CSS, z-index - no és una regla que no requereix atenció immediata.

moviment correcte de les capes lògiques, i

Perfect Page - plana. En qualsevol cas, abans que la imatge real en tres dimensions a l'extrem d'una escala massiva, i no en aquesta necessitat en particular. Els llocs web moderns - és una tasques experiència real, en el món real. Només han de treballar bé i mostrar una imatge tridimensional plana.

Per cert, el fenomen de la pàgina de destinació (pàgina d'aterratge) en forma d'opcions "creació de lloc" - la millor prova que la forma rectangular plana i seca, però extremadament contingut precís - també és bo i pràctic. No obstant això, cal assenyalar que els llocs de les empreses monopolistes enganxats al seu El més important - la cara de l'empresa, la seva funcionalitat i potència de producció. Tecnologia de la Informació monstres van sentir que pàgines de destinació - és s'enfronten les petites empreses, accessoris, Herbalife i altres "joieria".

Ens agradi o no, de fet correcta, el futur va a mostrar. És important que no només té sentit per a pintar en el contingut de les capes, sinó també per assegurar el moviment apropiat entre ells en qualsevol variant de la construcció d'un lloc web.

Excel·lent solució - AJAX (pàgina s'actualitza segons sigui necessari). Fins i tot solució més prometedora, quan la pàgina mostra que és necessari en aquest punt de la finestra del navegador.

De fet, z-index - aquesta simple regla de CSS. El seu propòsit - per mostrar el nivell de l'etiqueta perquè el navegador pot determinar quan l'element de visualització i quina part d'aquest element serà visible. Capa i la pàgina - un concepte molt relatiu, ja que és problemàtic el disseny de la pàgina i tenir en compte el sentit de la regla z-index de pantalla diferent contingut.

En general, un desenvolupador tria un nombre favorit, i li dóna a totes les etiquetes en una fila, i el fet que hem d'estar d'alguna manera fora, assigna el següent nombre. Donen importància a les capes i nivells de pàgines - no és particularment innovadores pràctiques i prometedores.

No obstant això, si el moviment semàntica z-index per a un diàleg amb el visitant, és possible crear un efecte pràctic. Similar a com les etiquetes es poden superposar una sobre l'altra, és possible imposar un diàleg (visitant del lloc) i dur a terme el moviment entre ells. Des d'aquesta perspectiva, l'aplicació de les regles de l'índex Z de CSS sembla ser molt viable i pràctic.