The Leaflet map floats above all components

I don't know much about the front-end components of the web. Please point out if there are any deficiencies in the problem description. I am currently working on an offline map-related business. I use tile layers combined with Leaflet. The entire page has many other components besides the map layer. The ideal situation is that the map is at the bottom开发者_StackOverflow社区 of the page, with only a part of the center Can operate the map. As shown below picsimple demo The problem I'm having now is that the map floats on top of all components, Neither setting z-index nor using pane has any effect. as shown in the picture picinitial position Drag freely on top of all components GIF I hope someone can provide me with a solution, or an example, to help me solve this problem, thanks for the guidance.