z-index

When the content is blocked, the first reaction is to wonder if the hierarchy is wrong, then to try to increase the target element’s Z-index, and then perhaps to fail. Then take your time to figure it out.

The most common use of z-index is to solve the problem of element hierarchy. But when we use it, we often wonder why it doesn’t work.

  1. One of the most important but often overlooked premises is: positioned elements (a non-static element with the position attribute).
  2. The default value is auto, meaning that the element does not establish a new local stack context. The newly generated element in the current stack context has the same stack level as the parent element. Typically, the stack hierarchy that represents the generated elements in the current stack context is encountered. Let’s borrow a picture:

  • Root
    • DIV #1
    • DIV #2
    • DIV #3
      • DIV #4
      • DIV #5
      • DIV #6

Note that DIV#4, DIV# 5, and DIV# 6 are children of DIV# 3, so their cascading is handled entirely in DIV# 3. Once the cascade and rendering in DIV #3 is complete, the DIV #3 elements are passed to the root element as a whole and layered relative to their siblings. A simple way to figure out the rendering order of stacked elements on the Z-axis is to think of them as a series of version numbers, with child elements being minor versions below their parent. Using this method we can easily see why an element with a z-index of 1 (DIV #5) is layered on top of an element with a z-index of 2 (DIV #2), An element with a z-index of 6 (DIV #4) is superimposed on an element with a z-index of 5 (DIV #1). In our example (in final render order) : “Root” DIV # 1 – z – index crossed the DIV # 2 to 5 – z – index for 2 DIV # 3 – z – index for 4 s DIV # 4 – z – index is 6, on a z – index for 4 elements in cascade, ■ DIV # 6-z-index = 1, inside an element with z-index = 4, inside an element with z-index = 4 So the render order is 4.3

Conclusion:

  • Create a cascading context for an HTML element location and z-index assignment (also for any opacity value other than 1).
  • A cascading context can be contained within other cascading contexts and together create a hierarchical cascading context.
  • Each cascade context is completely independent of its siblings: only child elements are considered when dealing with cascades.
  • Each cascade context is self-contained: when the contents of an element are cascaded, the entire element is cascaded sequentially in the parent cascade context.

overflow

When writing styles, it is very easy to write overflow: auto, the purpose is to make the scroll bar appear when the content overflows, but also because of this, there are many times, the content will be inexplicably blocked. As shown below:

Attribute values are as follows:

  • Visible default value. Content is not pruned and is rendered outside the element box
  • Hidden content is trimmed, and the rest of the content is not visible
  • Scroll content is trimmed and the browser displays a scroll bar to view the rest of the content
  • Auto is determined by the browser and displays a scroll bar if the content is trimmed
  • Inherit specifies that the overflow property value is inherited from the parent element

Actually, another way to think about it is, auto/scroll means that if the scroll bar is going to be able to scroll, it’s not going to be pruned, but if it’s going to be able to scroll, it’s going to be pruned, so it’s going to be visible.