This is the third day of my participation in Gwen Challenge

Preface 📣

  • ❌ Set the cascading style using only the z-index property
  • ❌ z-index:3; z-index:99; z-index:999; . This adjusts the order of the elements up and down according to size
  • 🌳 z-index is just the tip of the CSS cascade iceberg (z-index works in positioning elements and display: Flex elements) and there are more important things we need to know
  • 👼 Goal: to understand the context, level, and order of the cascade, 🆗

Start learning 🚴 (about 5 minutes)

First stop:Stacking Context ⛽

It’s a three-dimensional concept in HTML, and you can think of elements in a cascading context as “superior” to normal elements on the Z-axis. Consider 🤔 : How does an ordinary element become a cascading context element?

  • The root element of HTML is a cascading context element

  • Position: relative or absolute positioning element, and FireFox/Internet explorer browser (not including Chrome, etc. Its kernel) contains the position: under fixed statement the positioning of the elements, and z – the index value is not the time for auto is digital, Even a 0 would create that. (We usually use the most development)

  • Some of the new properties cSS3 brings will also create a cascading context.

The second stop:Stacking order ⛽

Self-reflection 🤓 : Development usually relies too much on z-index, forget to take advantage of other element attributes. Using too many Z-indexes can also clutter the page. Remember the following order to understand the beginning of CSS cascading.

From low to high
background/border
The z-index value is < 0
Block element
Float float element
The inline/inline – block element
Z-index =0 or z-index= auto or there is no z-index element
z-index > 0

🚧 Note: If the elements are stacked in the same order, refer to the element priority on MDN

🚨 key points of understanding

  • Who is bigger and who is on top: Cascade level who is bigger and who is on top, for example in the same cascade context the larger z-index value is, the higher it is (note that cascade level and Z-index are not the same thing)
  • Coming from behind: When two elements are stacked at the same level and in the same order, the next element overrides the previous one

The third stop:Stacking level ⛽

Understanding 🤗 : Determines the z-axis display order of elements in the same cascading context

Coming to the end 🚩

🤔 : Once a normal element has a cascading context, its cascading order becomes higher. Explain the cascading order?

Resources 📃

CSS World Chapter 7 – CSS World Cascading rules

Please like and follow us at 🌾

“A little knowledge hundred JS” series (1) rapid learning personal blog | making – the wuling