CSS z-index: en översikt, egenskaper

Utesluta CSS z-index - sidelement positionskoordinat Z: nivån av displayelement eller skikt i vilket den är belägen. Tag som har z-index större visas i sin helhet. Tags visas i den ordning de förekommer i det inkommande flödet och överlappning. приоритет видимости. Z-index-värde bestämmer synlighet prioritet.

Vi måste hylla moderna webbläsare och algoritmer visningselement. Sedan den tid då grafik och infångade skärmar bildade klippning problemet synliga och osynliga delarna av elementen i programfönstret, har det synliga presentationsteknikinnehåll nådde utmärkta resultat. I ett webbläsarfönster, är alla element visas korrekt, användaren ser endast vad som anges design eller utvecklare.

Den allmänna regeln: ordning och nivån på

Ingångs ström (sidan bildade server) sekventiellt läser webbläsaren. Alla taggar visas i enlighet med CSS-regler och kan överlappa varandra.

Detta exempel beskriver fyra synliga element. Varje successiv överlappar en föregående. På platser där taggarna korsas, det är en fråga om prioritering. Som en regel z-index CSS-taggar för alla dessa samma och lika med 848, kommer det att vara uppenbart att elementet, som är som följer. Allt som kikar ut från under var och en av nästa element, tydligen.

regel synlighet

Webbläsare iaktta de regler för synlighet bara "rättvis". För att komma fram till en algoritm som låter dig analysera alla brutto införandet och använder bara de som faktiskt skär, med undantag av de delar som absorberas av varje efterföljande inslag - är mycket svårt.

I de flesta fall är detta inte nödvändigt. Modern utrustning är mycket snabb, och märker rita del till den punkt där det kommer att blockera nästa element, är mycket problematisk.

Inflytande på elementgruppen

Det räcker med att den tredje taggen scCSS3 öka z-index, och scCSS4 - att minska den, den totala bilden förändrats. Sekvensen av element i strömmen är densamma:

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

Det bör noteras att den andra bilden är faktiskt tar upp mer plats än det verkar. Den tredje bilden är densamma. Vidare består den av två delar (två ägg) på ett avstånd från varandra.

Den verkliga storleken av de regioner, som upptar den andra och tredje bilderna är markerade i gult och grått respektive.

Kombinationen av z-index till bakgrundsfärg

Det bör noteras att egenskaperna hos CSS Bakgrund och z-index kompletterar varandra. Alla blockelement, och alla andra, alltid upptar ett rektangulärt område som bildas av den maximala höjden och den maximala bredden av innehållet.

Med hjälp av bilder, kan du göra någon form fältelement, men runt omkring honom det alltid kommer att vara en rektangel. Det är ett faktum att det är viktigt att ta hänsyn till på rätt sätt.

Du kan placera text på en bana valda formen, men om du inte gör det, blir innehållet till varje element i en rektangulär låda, successivt vid mottagandet av ingången.

Användningsegenskaper CSS z-index i det element, vars bakgrunds-färgvärdet är transparent (en typ av genomskinlighet), kan emulera någon kretselement. Även i alla fall i verkligheten elementet är rektangulärt.

Händelser och synliga element

På platser där elementet blockeras av ett annat element, händelserna inte kommer att fungera. Som en allmän regel, om objektet är utom synhåll, även han är tillgången zonen.

Om en utvecklare vill låsa knapp eller menypost, kan det mycket väl vara placerat över den låsande tagg annan tagg, kanske en transparent (t ex med hjälp av regeln om CSS opacitet), men i alla fall, som har en högre CSS z-index.

Sedan händelsen från användarens synvinkel, kan delas in relevant och inte har någon, då den sista (flytta musen, trycker slump knappar på tangentbordet, timersignalen) kan användas för att på ett adekvat ändra innehållet i webbläsarfönstret.

Ett enkelt exempel: en besökare har flyttat muspekaren på menyalternativet, men har ännu inte beslutat att göra något. Utvecklaren kan ge en händelse för att följa utvecklingen av dialogen till den önskade punkten (klicka - en besökare beslutar) och visa ett tillräckligt innehåll. Regel CSS z-index är den bäst lämpade för tillfället.

bildformat

Eftersom bilderna är en viktig byggmaterial för en webbplats (skönhet, modernitet, funktionalitet - är den vanliga normen av saker), är det av stor betydelse för val bildformat.

I stort kan man använda alla de olika existerande format, men när det gäller användbarhet och effektivitet är helt rimligt att begränsa * .png för statiska bilder och * .gif - för animerade bilder. Populär * .jpg är också bra, men det tillåter inte möjlighet att manipulera visningsutrymme.

Webbläsare buggar och utvecklaren

Inte så ofta är fallet när CSS z-index inte fungerar, men det händer. Villkor för Cascading Style Sheets arbetar alltid, och volymen av stil fil når ofta betydande volymer. När något inte visas, eller bara inte har vad som måste vara först måste kontrollera din egen kod, sedan rensa webbläsarens cache och testa din egen kod igen.

Tolka HTML och CSS, är webbläsaren nästan inte göra misstag - det är ett axiom. Om önskat alternativ inte, då, i utformningen av CSS {position: absolute; z-index: 112233; vänster: 10px; top: 20px; } ... något saknas eller inte registreras.

Det vanligaste misstaget - fel Visas elementet saknas en hänvisning till dess synlighet på en absolut eller relativ position. Ibland kan arbeta för att ange stilen direkt på elementet och är inte hans stil. I det senare fallet är det en väg ut, men det är i första hand talar om någon form av fel i koden.

Style måste vara i klass eller ID stil. Pekar stil på elementet bör endast i undantagsfall.

Användning jQuery.css (z-index, 123) kan också leda till ett fel, om den inte appliceras på klass eller identifierare. Dessutom jQuery - en verkligt anmärkningsvärd utvecklingsverktyg. Men innan du använder det, inte ont att tänka: är det möjligt att avstå från improviserade innebär HTML / CSS, z-index - är inte en regel som inte kräver omedelbar uppmärksamhet.

Korrekt rörelse av logiska skikt, och

Perfekt sida - platt. I vilket fall som helst innan den verkliga tredimensionella bilden längst stor skala, och inte i detta speciella behov. Moderna webbplatser - det är en verklig upplevelse, verkliga uppgifter. De behöver bara fungera bra och visar ett platt tredimensionell bild.

Förresten, fenomenet målsidan (målsidan) i form av optioner "site building" - det bästa beviset på att den platta rektangulär form och torrt, men mycket exakta innehållet - också bra och praktisk. Men det bör noteras att platserna för de monopolföretag fastnat till deras det viktigaste - i ansiktet av företaget, dess funktionalitet och kraftproduktion. Informationsteknologi Monsters kände att landningssidor - det är små företag ansikte, tillbehör, Herbalife och andra "smycken".

Gilla det eller inte, i själva verket rätt, kommer den framtida visar. Det är viktigt att inte bara är vettigt att måla i skikt innehåll, men också för att säkerställa korrekt rörelse mellan dem när som helst variant av att bygga en webbplats.

Utmärkt lösning - AJAX (sidan uppdateras vid behov). Ännu mer lovande lösning, när sidan visar att det är nödvändigt vid denna tidpunkt i webbläsarfönstret.

I själva verket, z-index - denna enkla regel CSS. Dess syfte - att visa nivån på taggen så att webbläsaren kan avgöra när displayen elementet och vilken del av detta element kommer att vara synlig. Skiktet och sida - en mycket relativt begrepp, eftersom det är problematiskt att utforma sidan och tänka på innebörden av artikel z-index för olika innehåll display.

Vanligtvis väljer en utvecklare en favorit nummer, och ger den till alla taggar i rad, och det faktum att vi måste på något sätt sticker ut delar nästa nummer. Fästa vikt vid lager och nivåer av sidor - är inte särskilt progressiva och lovande metoder.

Om flytten semantik z-index till en dialog med besökaren är det möjligt att skapa en praktisk effekt. I likhet med hur taggar kan läggas ovanpå varandra, är det möjligt att införa en dialog (besökaren) och utför rörelse mellan dem. Ur detta perspektiv verkar tillämpningen av reglerna för CSS z-index är mycket möjligt och praktiskt.