CSS z-index: overview, properties

CSS rule z-index - the position of the page element in the Z coordinate: the level of the element's display or the layer in which it is located. A tag that has more z-index will be displayed in its entirety. The tags are displayed in the order they appear in the incoming thread and overlap. приоритет видимости. The z-index value determines the visibility priority.

We must pay tribute to modern browsers and algorithms for displaying elements. Since the time when graphics captured screens and the problem of clipping visible and invisible parts of elements in application windows, the technology of displaying visible content has achieved excellent results. In the browser window, all items 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 in sequence. All tags are displayed in accordance with CSS rules and can overlap.

In this example, four visible elements are described. Every next one blocks the previous one. In places where tags intersect, the question of priority arises. Since the z-index CSS rule for all these tags is the same and equal to 848, the element that goes next is visible. Everything that looks out from under each next element, apparently.

Visibility rule

Browsers observe the rule of visibility exclusively "honestly". To think up an algorithm by which you can analyze all the overlays in bulk and apply only those that really intersect without taking into account those sites that are absorbed by each of the following elements is very difficult.

In most cases, this is not necessary. Modern equipment works very quickly, and it's very problematic to notice the redrawing of the element before the next element overrides it.

Effect on the sequence of elements

It is enough for the third tag scCSS3 to increase the value of z-index, and scCSS4 - to reduce it, as the general picture changes. The sequence of elements in the stream remains the same:

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

It should be noted that the second picture actually takes up more space than it seems. The third picture, too. In addition, it consists of two parts (two eggs), located at a distance from each other.

The real dimensions of the areas that occupy the second and third images are highlighted in yellow and gray colors respectively.

Combining z-index with background-color

It should be noted that the CSS background & z-index properties complement each other. All block elements, and any others, always occupy a rectangular area formed by the maximum height and the maximum width of the content.

Using the 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 take into account correctly.

You can place text around the outline of the selected shape, but if you do not, the content falls into any element, like in a rectangular box, sequentially, as it comes from the input stream.

Using the CSS property of the z-index on an element whose background-color is transparent (a kind of transparency) allows you to emulate any outline of an element. Although in any case in reality the element will be rectangular.

Events and element visibility

In places where the element is blocked by another element, events on it will not work. As a general rule, if the element is out of sight, it is also out of range.

If the developer wants to lock a button or menu item, he can easily place another tag over the blocked tag, perhaps transparent (for example, using the CSS opacity rule), but in any case having a higher CSS z-index.

Since the events, from the user's point of view, can be divided into meaningful and not having such, the latter (mouse movement, accidental key press on the keyboard, timer signal) can be used to adequately change the content in the browser window.

A simple example: the visitor moved the mouse pointer over the menu item, but has not yet made a decision to do anything. The developer could foresee this event, track the movement to the desired point of the dialogue (click - the visitor makes the decision) and display adequate content. The CSS z-index rule works best for this case.

Image Format

Since images are an important building material for any site (beauty, modernity, functionality is already a familiar norm of things), it is of great importance to choose a format for images.

By and large, you can use all the variety of existing formats, but from the point of view of practicality and efficiency it's reasonable to limit * .png for static images and * .gif for animated images. Popular * .jpg is also good, but it does not allow you to flexibly manipulate the display space.

Browser and developer errors

It's not often that the CSS z-index does not work, but it happens. The rules of the cascading style table always work, and the volume of the style file often reaches significant volumes. When something is not displayed or there is simply not what it should be, you first need to check your own code, then clear the browser's cache and again check your own code.

Interpreting HTML and CSS, the browser almost does not make mistakes - it's an axiom. If the desired element is not present, it means that in CSS construction {position: absolute; Z-index: 112233; Left: 10px; Top: 20px; ...} something is missing or spelled wrong.

The most common mistake - the coordinates of the element are incorrect, the indication of its visibility, the absolute or relative position is missing. Sometimes the style can be specified directly on the element, not in its style. In the latter case, this is a way out of the situation, but this primarily indicates an error in the code.

The style must be specified in the style of the class or identifier. Specify the style on the element only in exceptional cases.

Using jQuery.css (z-index, 123) can also result in an error if applied to the wrong class or identifier. In addition, jQuery is a really great developer tool. However, before you apply it, it does not hurt to think: can not do with improvised HTML / CSS, z-index is not a rule that does not need close attention.

Correct layers and logical movement

The ideal page is flat. In any case, it is far from a real volume image on a mass scale, and there is no special 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 forms and dry but extremely clear content are also good and practical. But it should be noted that the sites of monopoly companies have remained their own: the main thing is the face of the company, its functionality and production capacity. Monsters of information technology found that landing pages - this is the face of small business, accessories, herbalife and other "jewelry".

So it or not, as it is actually correct, the future will show. It is important that with any version of the site it makes sense not only to paint the layers of content, but also to ensure the correct movement between them.

The perfect solution is AJAX (the page is updated as needed). An even more promising solution is when the page shows what is needed at a given point in the browser window.

In fact, z-index is a simple CSS rule. Its purpose is to show the level of the tag so that the browser can determine when the item is displayed and which part of that element will be visible. Layer and page are very relative concepts, because it is problematic to develop a page and keep in mind the values of the z-index rule for various content display options.

Usually the developer selects a favorite number and gives it to all the tags in a row, and those who need to somehow stand out assign the next number. Giving importance to layers and page levels is not a particularly progressive and promising practice.

However, if you transfer the z-index semantics to the dialogue area with the visitor, you can create a practical effect. Just as the tags can overlap, you can overlay the dialogs (site-visitor) and perform the movement between them. From this point of view, the application of the CSS z-index rule seems very practical and practical.