CSS rule z-index - the position of the page element in the Z coordinate: the display level of the element or the layer in which it is located. A tag with a larger z-index will be displayed in full. Tags are displayed in the order they appear in the input stream and overlap each other. The z-index value determines the visibility priority.
We must pay tribute to modern browsers and algorithms for displaying elements. Since the time when the graphics took possession of the screens and the problem of clipping visible and invisible parts of elements in application windows was formed, the technology for displaying visible content has achieved excellent results. In the browser window, all the elements are displayed correctly, the user sees only what is defined by the design or developer.
General rule: order and level
The input stream (the page formed by the server) is read by the browser sequentially. All tags are displayed in accordance with CSS rules and can overlap.
This example describes four visible elements. Each next overlaps the previous one. In places where tags intersect, a question of priority arises. Since the z-index CSS rule for all these tags is the same and equal to 848, the element that comes next will be visible. Everything that looks out from under each next element is visible.
Visibility rule
Browsers follow the rule of visibility exclusively "honestly." It is very difficult to come up with an algorithm by which you can wholesale analyze all overlays and apply only those that really intersect without taking into account those sections that are absorbed by each of the following elements.
In most cases this is not necessary. Modern equipment works very quickly, and to notice the redrawing of an element until the moment when the next element overlaps it is very problematic.
Effect on the sequence of elements
It is enough for the third scCSS3 tag to increase the z-index value, and for scCSS4 to decrease it, as the overall picture changes. In this case, the sequence of elements in the stream remains the same:
- div id = 'scCSS1';
- div id = 'scCSS2';
- div id = 'scCSS3';
- div id = 'scCSS4'.
It should be noted that the second picture actually takes up more space than it seems. Third picture too. In addition, it consists of two parts (two eggs) located at a distance from each other.
The actual sizes of the areas occupied by the second and third pictures are highlighted in yellow and gray, respectively.
Combining z-index with background-color
Note that the CSS properties of background & z-index complement each other. All block elements, and any other, always occupy a rectangular area formed by the maximum height and maximum width of the content.
Using images, you can give any shape to the area of the element, but there will always be a rectangle around it. This is a fact that is important to consider correctly.
You can place the text along the contour of the selected shape, but if this is not done, then the content falls into any element, like in a rectangular box, and sequentially, as it comes from the input stream.
Using the CSS z-index property in an element whose background-color is transparent (a kind of transparency) allows you to emulate any element outline. Although in any case, in reality, the element will be rectangular.
Events and Element Visibility
In places where the element is overlapped by another element, events on it will not work. As a general rule, if an element is out of sight, it is also out of reach.
If a developer wants to lock a button or menu item, he may well put another tag above the lockable tag, possibly transparent (for example, using the CSS opacity rule ), but in any case having a higher CSS z-index.
Since events, from a user point of view, can be divided into relevant and non-existent, the latter (moving the mouse, accidentally pressing a button on the keyboard, a timer signal) can be used to adequately change the content in the browser window.
A simple example: a visitor has moved the mouse over a menu item, but has not yet decided to do something. The developer could foresee this event, track the movement to the desired point in the dialogue (click - the visitor makes a decision) and display adequate content. CSS z-index rule is the best suited for this case.
Image format
Since images are an important building material for any site (beauty, modernity, functionality are the usual norm of things), the choice of format for images is of great importance.
By and large, you can use the whole variety of existing formats, but from the point of view of practicality and efficiency it is quite reasonable to limit yourself to * .png for static images and * .gif - for animated pictures. The popular * .jpg is also good, but it does not allow flexible manipulation of the display space.
Browser and Developer Errors
Not so often a situation arises when CSS z-index does not work, but this happens. Cascading style sheet rules always work, and the style file volume often reaches significant volumes. When something is not displayed correctly or there simply is not what it should be, you must first check your own code, then clear the browser cache and check your own code again.
Interpreting HTML and CSS, the browser makes virtually no mistakes - this is an axiom. If the element is missing, then the CSS construct {position: absolute; z-index: 112233; left: 10px; top: 20px; ...} something is missing or not recorded correctly.
The most common mistake - the coordinates of the element are incorrectly indicated, the indication of its visibility, absolute or relative position is missing. Sometimes it may work to indicate the style directly on the element, and not in its style. In the latter case, this is the way out of the situation, but this first of all indicates some kind of error in the code.
The style must be specified in the style of the class or identifier. The style on the element should be indicated only in exceptional cases.
Using jQuery.css (z-index, 123) can also lead to an error if applied to the wrong class or identifier. Plus, jQuery is a really great developer tool. However, before applying it, it won’t hurt to think: is it possible to manage HTML / CSS tools at hand, z-index is not a rule that does not need close attention.
The correct layers and logical movement
The ideal page is flat. In any case, the real volumetric image on a mass scale is far, and there is no particular need for this. Modern sites are real practice, real tasks. They just have to work, but flat ones show a three-dimensional image.
By the way, the landing page phenomenon in the form of a “site building” variant is the best confirmation that flat rectangular shapes and dry but extremely clear content are also good and practical. But it should be noted that the sites of monopolistic companies remained at their own: the main thing is the face of the company, its functionality and production power. Information technology monsters considered landing pages to be the face of small business, accessories, herbalife and other “jewelry”.
Whether it is true or not, the truth will show the future. It is important that with any version of building a site, it makes sense not only to paint content across layers, but also to ensure proper movement between them.
An excellent solution is AJAX (the page is updated as needed). An even more promising solution when the page shows what is needed at a given point in the browser window.
Essentially, z-index is a simple CSS rule. Its purpose is to show the level of the tag so that the browser can determine when to display the element and how much of this element will be visible. A layer and a page are very relative concepts, because it is problematic to design a page and keep in mind the values of the z-index rule for various options for displaying content.
Typically, the developer selects a favorite number and gives it to all the tags in a row, and assigns the next number to those that need to stand out somehow. Attaching importance to layers and page levels is not a particularly progressive and promising practice.
However, if you transfer the semantics of z-index to the area of dialogue with the visitor, you can create a practical effect. Similar to how tags can overlap, you can impose dialogs (site-visitor) and move between them. From this point of view, applying the CSS z-index rule seems very practical and practical.