origin
P1 and P2 are the two parent elements of fixed positioning. P1 contains C1 and its child element is absolute positioning. Although C1 has zIndex set, it is still covered by P2, as shown in the figure below
Repetition demo
Codepen. IO/Yangfan2016…
meaning
z-index
Cascading context
How to form a cascading context
Cascading level
The rules
The sample
Codesandbox. IO/s/keen – MCCL…
management
This problem is mainly due to insufficient understanding of zIndex. How to better use zIndex correctly is divided into two methods as follows:
- Make a rule for using zIndex in a project
- Dynamically maintain zIndex
Ground pie (Plain document flow)
Do not set z-index (z-index:auto, do not set z-index:0, unlike Auto, which creates a cascading context)
Sidebar (Mini page, navigation sidebar, filter sidebar)
Set z-index to a range of 1 to 10
Set the position: fixed
Sky Pie (popbox, global tips)
Set z-index to range 1050-3999
Try to set Position :fixed or mount to body
Die-hards (special case NPS/guidance)
Set z-index to 4000+
Set the position: fixed
The implementation of
- Define variables directly into less or sass files
/ / = = = = = = = the sidebar (mini page navigation sidebar, screening the sidebar) range of 1 to 10 = = = = = = = = = = = = / / @ zindex baseline - sider - base: 1; @zindex-sider-max:10; @zindex-sid-top-menu: @zindex-sid-base +1; @zindex-sid-left-nav: @zindex-sid-base +2; @zindex-sider-right-mini:@zindex-sider-base+3; / /... Reserved for other sidebars // Below batch select action bar @zindex-sider-bottom-Batch :@zindex-sider-max-1; / / = = = = = = = the sky sent (box, global tip) range 1050-3999 = = = = = = = = = = = = / / basic value (rc - trigger a default value 1050) @ zindex - sky - base: 1050; @zindex-sky-max:3999; / / bounced @ zindex - sky - modal: @ zindex - sky - base; // Prompt @zindex-sky-nofice:@zindex-sky-base+1; / / = = = = = = = the die-hards range (special case) 4000 + = = = = = = = = = = = = / / @ zindex baseline - special - base: 4000; // nps @zindex-special-nps:@zindex-special-base;Copy the code- Inject variables into CSS files with the postCSS-CSS-variables plug-in
Module. Exports = {/ / = = = = = = = the sidebar (mini page navigation sidebar, screening the sidebar) range of 1 to 10 = = = = = = = = = = = = / / the above menu bar 'zindex - sider - top - the menu: Zindex-sid-left-nav ': 3, // zindex-sid-right-mini: 4, //... Reserved for other sidebars // Select the action bar 'zindex-sider-bottom-Batch' below: 9, / / = = = = = = = the sky sent (box, global tip) range 1050-3999 = = = = = = = = = = = = / / bounced 'zindex - sky - modal: 1050, / / prompt box' zindex - sky - nofice ': 1051, / / = = = = = = = the die-hards range (special case) 4000 + = = = = = = = = = = = = / / NPS 'zindex - special - NPS: 4000};Copy the code- Maintain zIndex globally
Refer to the source code of element-UI, as shown in the figure below. The general principle is that a modalStack is maintained globally to store all popboxes opened on the page (including zindex information), and a zindex variable PopManger. Zindex is maintained globally
Step 1. When you open a pop-up box (call openModal), the zIndex increases automatically
Step 2. Each time a pop-up is closed, the zIndex of the current pop-up is taken from the zIndex value at the end of the queue in the modalStack (the values in the modalStack are arranged in ascending order because of Step 1).
Github.com/ElemeFE/ele…
reference
- Zindex developer.mozilla.org/zh-CN/docs/…
- Zindex drafts.csswg.org/css2/#propd…
- Cascading context developer.mozilla.org/zh-CN/docs/…
- Why isn’t z-index working? To record my understanding of cascading context juejin.cn/post/684490…
- Understand all the details of the Z – index zhuanlan.zhihu.com/p/26866325