CSS基础:position对z-index的影响

CSS基础:position对z-index的影响

这两天回顾CSS,发现自己对CSS的细节还是很模糊的。碰到一个这样的场景,div.bg与div.main并列,设置了div.bg的position为fixed,加上背景色和透明度,作为区域div.item的背景。结果在div.bg变成透明的同时,div.main没有显示在背景上,反而像是也变透明了,跟div.bg混在了一起。当给div.main加上position:relative后,既可以正常显示在div.bg之上了。

瞪眼看了半天,没看明白原因。这种问题还不太好Google,不知道怎么搜:(。找了一圈之后,终于在StackOverflow上找到了个相关的讨论。原来是CSS对position和z-index的应该的基本规则。规则是这样的:z-index在没有设置的时候,这种HTML的元素顺序应用:兄弟节点,后面的节点在前面的节点上面;父子节点,子节点在父节点上面。很简单没有问题!

饶人的是前面的规则只有在position被设置了的情况下才有效,就是说这些节点要在position设置成relative、absolute、fixed之一时才会应用z-index进行上下比较。没设置position的节点,那就是二等公民了,永远显示在设置了position的节点下面。这就很清楚的解释了我遇到的这个现象。

下面是一个简单的例子演示一下这个过程, div.bg和div.main是兄弟节点。

  • 第一种情况item展示了:div.bg设置了position,div.main没有设置position,div.main显示在了透明的div.bg下面。
  • 第二种情况item展示了:div.bg和div.main都设置了position,div.main显示在了div.bg上面。
  • 第三种情况item展示了:div.bg和div.main都设置了position,div.main的z-index(10)小于div.bg的z-index(11),div.main显示同第一种情况。
  • 第四种情况item展示了:div.bg和div.main都设置了position,div.main的z-index(10)大于div.bg的z-index(9),div.main显示同第二种情况。

See the Pen
position and z-index
by Leon Zhang (@hileon)
on CodePen.

leon

每天进步一点点