https://img2024.cnblogs.com/blog/3388853/202408/3388853-20240812183846280-1202542483.png
主要原因: 观察z-index 文档由于定位盒子受层叠上下文 - CSS:层叠样式表 | MDN (mozilla.org)影响。
解决方法:
发现.header 为fixed定位,使得与下方input 定位relative
在同一级,都在html下。 而修改nav导航栏z-index 无效。, 是因为在header的层叠上下文。
总结
- **关键: 同一个层叠上下文下: z-index 值相同,按照 **
- z-index 无效, 观察层叠上下文结构