css中的z-index(二)

如果都没有z-index,结果又会是怎样呢?

css中的z-index(二)_第1张图片

运行结果:

css中的z-index(二)_第2张图片

由于box2在box1后面,在没有设置z-index的情况下,box2会压住box1。

接下来我们来看一下什么是从父现象?

css中的z-index(二)_第3张图片

运行结果:

css中的z-index(二)_第4张图片

这里我们设置div2的z-index小于div1的z-index,设置的div1的子元素child1的z-index大于div2的子元素child2的z-index。但最后运行的结果是child2压住child1。这就是从父现象。也就是说如果父元素被压住了。子元素也逃不了被压住的命运。无论子元素的z-index的大小。

你可能感兴趣的:(css中的z-index(二))