CSS垂直定位——CSS实验室

为了测试更多的定位属性，我们需要几个元素。同样，我们仍然首先创建一个p，id为p1，然后把它圈出来。

下面就是第二个p元素，id为p2。同样，我们来圈出第二个段落。

最后，在两个p的外面还套着一个div，再点击下面的按钮将它圈出来。

CSS垂直定位，z-index

首先，我们点击下面的按钮让段落1移动一下位置。

#p1{ position:absolute; left:50px; top:50px;}

#p2{ position:absolute; left:50px;top:50px;}

可以看到，两个段落重叠到了一起。那么谁在上面呢？我们可以给段落1、段落2分别设置一个背景色，就可以很清晰地看到谁在上面。

结论：第二个段落在上面。下面就轮到垂直定位z-index上场了。

#p1{ z-index:2; }

#p2{ z-index:1; }

可以看到，我们给第一个段落设置一个比较大的z-index属性值，那么它就会跑到上面来，这就是z-index属性的作用。