Z-index是确定哪个html元素重叠时出现在另一个html元素上方的属性。基本想法是,具有最高z-index的元素是“在顶部”。
默认情况下,元素的z索引为零,但是如果将一个元素的css属性设置为1,将另一个元素的css属性设置为5,则如果它们重叠,则后一个元素将位于前者的“顶部”。
到目前为止,如此简单,但是有几件事情需要注意。
正如在另一个答案中已经提到的那样,一个问题是,仅当元素以绝对,固定或相对位置定位时,z-index才起作用。(即CSS属性“ position”)。未定位的元素的z索引为零。
使事情进一步复杂化(以我的经验,这通常是不被理解的领域)是堆栈上下文的概念。更多信息可以在文章中找到如这个。简而言之,每次您明确设置新的z- index时,都会启动新的堆叠上下文。现在,在其上设置了z-index的所有子元素都在此新的堆栈上下文中,该上下文可能在另一个不相关元素上的堆栈上下文之上或之下。
此堆叠上下文是什么意思?这意味着z索引为100的元素不一定在z索引为1的元素之上。如果它们在不同的堆叠上下文中,则仅堆叠上下文的z索引本身很重要。