Reguła CSS z-index - pozycja elementu strony we współrzędnej Z: poziom wyświetlania elementu lub warstwy, w której się znajduje. Tag, który z-index będzie wyświetlany w całości. Tagi są wyświetlane w kolejności ich obserwacji w strumieniu wejściowym i nakładają się na siebie. Wartość indeksu Z określa priorytet widoczności.

Musimy złożyć hołd nowoczesnym przeglądarkom i algorytmom wyświetlania elementów. Od czasu, gdy grafika przechwyciła ekrany i problem przycinania widocznych i niewidocznych części elementów w oknach aplikacji, technologia wyświetlania widocznej treści osiągnęła doskonałe wyniki. W oknie przeglądarki wszystkie elementy są wyświetlane niepoprawnie, użytkownik widzi tylko to, co jest zdefiniowane przez projekt lub programistę.

Zasada ogólna: kolejność i poziom

Strumień wejściowy (strona generowana przez serwer) jest odczytywany przez przeglądarkę po kolei. Wszystkie znaczniki są wyświetlane zgodnie z regułami CSS i mogą się nakładać. W tym przykładzie opisano cztery widoczne elementy. Każdy następny nakłada się na poprzedni. W miejscach, w których znaczniki nakładają się, powstaje pytanie o pierwszeństwo. Ponieważ reguła CSS z-index we wszystkich tych tagach jest taka sama i taka sama 848, wtedy widoczny będzie element, który będzie widoczny. Wydaje się, że wszystko, co wychodzi spod każdego z kolejnych elementów.

Zasada widoczności

Przeglądarki stosują się do reguły wyłącznie "uczciwie". Aby wymyślić algorytm, który pozwala na hurtową analizę wszystkich nakładek i zastosować tylko te, którenaprawdę przecinają się bez uwzględnienia tych obszarów, które są pochłaniane przez każdy z następujących elementów - jest to bardzo trudne.


W większości przypadków nie jest to wymagane. Nowoczesny sprzęt działa bardzo szybko i bardzo problematyczne jest dostrzeżenie odmalowania elementu, dopóki nie zostanie zablokowany przez następny element.

Wpływ na sekwencję elementów

W trzecim znaczniku scCSS3 wystarczy zwiększyć wartość indeksu z, aw scCSS4 zmniejszyć go w miarę zmiany ogólnego obrazu. W tym przypadku sekwencja lokalizacji elementów w strumieniu pozostaje taka sama:

div id = 'scCSS1';

div id = "scCSS2";

div id = "scCSS3";

div id = "scCSS4".

Należy zauważyć, że drugi obraz zajmuje więcej miejsca, niż się wydaje. Trzecie zdjęcie też. Ponadto składa się z dwóch części (dwóch jaj), które znajdują się w pewnej odległości od siebie. Rzeczywiste wymiary obszarów zajmujących drugie i trzecie zdjęcie są odpowiednio wyróżnione na żółto i szaro.

Łączenie indeksu Z z kolorem tła

Należy zauważyć, że właściwości tła CSS & amp; Indeks Z uzupełnia się. Wszystkie elementy bloków, jak również inne, zawsze zajmują prostokątny obszar utworzony przez maksymalną wysokość i maksymalną szerokość treści. Za pomocą obrazu możesz podać dowolny kształt obszaru elementu, ale wokół niego zawsze będzie prostokąt. Jest to ważny fakt, który należy wziąć pod uwagę. Możesz umieścić tekst wzdłuż obrysu wybranego kształtu, ale jeśli tego nie zrobisz, zawartość wpada w dowolny element, na przykład prostokątnyi konsekwentnie, jako dane wejściowe ze strumienia wejściowego.
Użycie właściwości z-index CSS w elemencie, którego kolor tła jest przezroczysty (rodzaj przezroczystości) pozwala na emulowanie dowolnego konturu elementu. Chociaż w każdym razie, w rzeczywistości element będzie prostokątny.

Zdarzenia i widoczność elementów

W miejscach, w których element jest blokowany przez inny element, zdarzenia na nim nie będą działać. Zgodnie z ogólną zasadą, jeśli przedmiot jest poza zasięgiem wzroku, jest on również poza zasięgiem. Jeśli programista chce zablokować przycisk lub pozycję menu, może umieścić inny znacznik nad zablokowanym znacznikiem, prawdopodobnie przezroczysty (na przykład za pomocą krycia CSS), ale w każdym przypadku ma wyższy indeks z CSS. Ponieważ zdarzenia można podzielić na te, które nie mają znaczenia z punktu widzenia użytkownika, te ostatnie (przesuwając mysz, przypadkowo naciskając przycisk na klawiaturze, sygnał zegara) mogą być użyte do odpowiedniej zmiany zawartości okna przeglądarki. Prosty przykład: użytkownik przeniósł wskaźnik do pozycji menu, ale jeszcze nie zdecydował się na nic. Deweloper może przewidzieć to wydarzenie, śledzić ruch do pożądanego punktu dialogu (kliknięcie - użytkownik podejmuje decyzję) i wyświetlić odpowiednią treść. Reguła CSS z-index nie nadaje się do tego najlepiej.

Format obrazu

Ponieważ obraz jest ważnym materiałem budowlanym dla każdej witryny (piękno, nowoczesność, funkcjonalność - jest już zwykle regułą rzeczy), wybór formatu jest ważny dlaobrazy Ogólnie rzecz biorąc, można używać wszystkich różnych istniejących formatów, ale pod względem praktyczności i wydajności rozsądne jest ograniczanie * .png do statycznych obrazów i * .gif - do animowanych obrazów. Popularny * .jpg jest również dobry, ale nie pozwala na elastyczną manipulację obszarem wyświetlania.

Błędy przeglądarki i dewelopera

Indeks z CSS nie działa tak często, ale się zdarza. Reguły kaskadowego arkusza stylów zawsze działają, a objętość pliku stylistycznego często osiąga znaczne objętości. Kiedy coś jest nie tak lub po prostu nie musi, najpierw musisz sprawdzić swój kod, a następnie wyczyścić pamięć podręczną przeglądarki i ponownie sprawdzić swój kod.
Interpretując HTML i CSS, przeglądarka prawie nie dopuszcza błędów - jest to aksjomat. Jeśli nie ma wymaganego elementu, to w projekcie CSS {position: absolute; z-indeks: 112233; Pozostało: 10 pikseli; góra: 20 pikseli; } coś brakowało lub napisane źle. Najczęstszym błędem są nieprawidłowo określone współrzędne elementu, brak wskazania jego widoczności, bezwzględnego lub względnego położenia. Czasami przewodnik stylu może działać bezpośrednio na elemencie, a nie w jego stylu. W tym ostatnim przypadku jest to wyjście z sytuacji, ale to głównie mówi o jakimś błędzie w kodzie. Styl musi być określony w stylu klasy lub identyfikatora. Określ styl elementu tylko w wyjątkowych przypadkach. Użycie jQuery.css (z-index, 123) może również spowodować błąd, jeśli nie zostanie zastosowany do klasy lub kodu. Ponadto jQuery jest naprawdę świetnym narzędziem dla programistów.Jednak przed zastosowaniem go nie przeszkodzi ci w myśleniu o narzędziach HTML /CSS, indeks z-z nie jest regułą, która nie wymaga szczególnej uwagi.

Prawidłowe warstwy i logiczna przemieszczenie

Idealna strona jest płaska. W każdym razie, do prawdziwego, masowego obrazu na dużą skalę, daleko, ale nie ma specjalnej potrzeby. Nowoczesne witryny to prawdziwa praktyka, prawdziwe zadania. Po prostu muszą pracować, no dobrze, mieszkanie wyświetla obraz zbiorczy. Nawiasem mówiąc, zjawisko stron docelowych (landing) na stronie w formie opcji „plac budowy” - najlepszy dowód, że płaski prostokątny kształt i suche, ale bardzo wyraźnie treść - i niemal zbyt dobrze. Należy jednak zauważyć, że strony firm monopolistycznych pozostały przy nich: najważniejsze - twarz firmy, jej funkcjonalność i moce produkcyjne. Potwory technologii informatycznych uznały, że strony docelowe to osoba małego biznesu, akcesoria, herbalife i inna "biżuteria kostiumowa". Czy to prawda, czy nie, przyszłość się pokaże. Ważne jest, aby w każdym wariancie budowania witryny miało sens nie tylko rozkładanie treści, ale także zapewnienie prawidłowego przemieszczania się między nimi. Idealnym rozwiązaniem jest AJAX (strona jest aktualizowana w razie potrzeby). Jeszcze bardziej obiecujące rozwiązanie, gdy strona pokazuje, co jest potrzebne w tym momencie w oknie przeglądarki. Zasadniczo indeks Z jest prostą regułą CSS. Jego celem jest pokazanie poziomu znacznika, aby przeglądarka mogła określić, kiedy wyświetlić element i która część tego elementu będziewidoczny. Warstwa i strona są bardzo względnymi pojęciami, ponieważ problematyczne jest projektowanie strony i zachowanie wartości reguły indeksu Z dla różnych opcji wyświetlania. Zazwyczaj programista wybiera ulubiony numer i nadaje mu wszystkie tagi z rzędu, a ci, którzy muszą się jakoś wyróżnić, przypisują kolejny numer. Dawanie wartości warstwom i poziomom strony nie jest szczególnie progresywną i obiecującą praktyką. Jednakże, jeśli przeniesiesz semantykę z-index do okna dialogowego z gościem, możesz stworzyć efekt praktyczny. Podobnie jak znaczniki mogą nakładać się na siebie, możesz nałożyć okna dialogowe (witrynę odwiedzającego) i przechodzić między nimi. Z tego punktu widzenia stosowanie reguły Z-ZS wydaje się bardzo rozsądne i praktyczne.