z-index 未应用

Question

首先，请允许我说我对 CSS 很陌生。还有很多要学的！我在https://web.archive.org/web/20130709112702/http://www.thesweet-spot.com/test77的网站上工作

一切都很好，除了主要内容框被放置在固定位置的徽标下方而不是在其上方，即使徽标上的 z-index 低于内容框上的 z-index。各位大神能告诉我什么？

Answer 1

其实有两个原因：

1. 它的父级设置为显示在徽标的后面。应用于该父元素中的元素的任何 z-index 将仅应用于该父元素中的其他元素。父元素中的所有元素都将相应堆叠，然后整个元素将按照其堆叠顺序放置在徽标后面。

2. z-index 仅适用于具有绝对、固定或相对位置的元素。它不适用于具有静态位置的元素。

Answer 2

它受父容器的 z-index 约束。您不能将子级设置为比父级更高的 z-index；它以父母的价值为上限。

您可以将条纹作为主体标签的背景，然后将container 设置为没有背景。完成后将 container 设置为更高的 z-index。`