css中的index:CSS中的index是什么意思？它和z-index有什么关系？
Q: CSS中的index是什么意思？它和z-index有什么关系？
A: CSS中并没有名为index的独立属性，通常说的index多指z-index。根据MDN Web Docs（2023）的定义，z-index用于设置定位元素的堆叠顺序。其值可为整数，数值越大越靠前，且仅对position为relative、absolute、fixed或sticky的元素生效。理解z-index有助于处理元素层叠与遮挡问题。
Q: z-index的默认值是多少？不写和写0有区别吗？
A: 根据W3C CSS2.1规范（2011），z-index的默认值为auto，表示元素不参与创建新的堆叠上下文，层叠顺序按文档流决定。而显式写0会为定位元素创建新的堆叠上下文。因此，auto与0在层叠行为上不同，需谨慎使用。MDN也建议明确赋值以控制层叠。
Q: 为什么设置了很大的z-index元素还是被遮挡？
A: 这通常是因为父元素创建了堆叠上下文。根据W3C规范，若父元素有opacity小于1、transform、filter等属性，会形成新的堆叠上下文，子元素的z-index只在父上下文内比较。MDN指出，此时子元素再大的z-index也无法超越父上下文外的元素。解决需调整父级层级。
Q: CSS中还有哪些类似index的概念？
A: 除z-index外，CSS中还有order属性，用于flex或grid布局中控制项目顺序，默认值为0，数值越小越靠前。根据CSS Flexible Box Layout Module Level 1（W3C, 2018），order改变视觉顺序但不影响文档流和可访问性。另外，counter-increment也可用于生成序号类index效果。
Q: z-index可以取负值吗？会有什么效果？
A: 可以。根据MDN Web Docs，z-index允许负整数。当元素z-index为负且已定位时，它会位于其堆叠上下文中背景和边框之下，但仍在父元素背景之上。常用于将装饰性元素置于内容后方。注意若父元素无堆叠上下文，负值元素可能被其他上下文遮挡。
关于“css中的index”的对话
交流“css中的index”的常见场景
【前端新手小陈】 师父，我最近在写CSS的时候，经常看到别人代码里用 z-index，这个 index 是什么意思啊？
【资深前端老李】 z-index 里的 index 其实指的是‘层级索引’，它决定了元素在垂直于屏幕的 Z 轴上的堆叠顺序。数值越大，越靠上显示。
【前端新手小陈】 那它和网页里的 index 索引是一个概念吗？
【资深前端老李】 有点类似，但 z-index 的索引只对定位元素生效，比如 position 是 relative、absolute、fixed 或 sticky 的元素。
【前端新手小陈】 那如果两个元素都没有设置 z-index，谁在上面？
【资深前端老李】 默认情况下，后来居上——HTML 中后出现的元素会覆盖先出现的，除非受到层叠上下文影响。
【前端新手小陈】 层叠上下文又是什么？听起来好抽象。
【资深前端老李】 你可以把它理解成一个独立的小世界，里面的 z-index 只在内部比较，不会和外部的元素直接打架。
【前端新手小陈】 那哪些属性会创建层叠上下文呢？
【资深前端老李】 常见的有 position 非 static 且 z-index 不是 auto、opacity 小于 1、transform 不是 none、filter 不是 none 等等。
【前端新手小陈】 哦，所以有时候我设了很大的 z-index 还是被盖住，就是因为父级创建了层叠上下文？
【资深前端老李】 没错，如果父级层叠上下文的层级低，子级 z-index 再高也超不过父级所在的层级。
【前端新手小陈】 那有没有类似 index 的其他 CSS 属性？
【资深前端老李】 有啊，比如 flex 布局里的 order 属性，可以改变子元素的排列顺序，也算一种索引控制。
【前端新手小陈】 order 和 z-index 有什么区别？
【资深前端老李】 order 控制的是主轴上的排列顺序，影响布局流；z-index 控制的是视觉堆叠，不影响布局位置。
【前端新手小陈】 明白了，那 grid 布局里有没有类似的索引？
【资深前端老李】 grid 里有 grid-row、grid-column 可以指定网格线索引，还有 grid-area 给区域命名，也算索引思维。
【前端新手小陈】 所以 CSS 里的 index 其实是一类‘位置或顺序的编号’？
【资深前端老李】 对，可以这么理解。z-index 管堆叠，order 管排列，grid 线管布局，都是通过编号来精确控制元素。
【前端新手小陈】 谢谢师父，我回去把 z-index 和层叠上下文再练一练！
【资深前端老李】 好，记住多动手写例子，比背概念管用。
