元素可以相对于它本身的位置进行定位。把元素的 position 设置成 relative ，就可以继续用 top，right，bottom 还有 left 来设置元素的相对位置了。

现在界面上一个大盒子里面包装了三个带数字的小盒子，我们先用 .box 这个类选择器，把小盒子的 display 设置成 inline-block，现在这几个小盒子就会横着排列了。再用 width 把元素的宽度设置成 72 像素，用 height 把元素的高度也设置成 72 像素。

relative

比如我们想设置 2 号盒子的相对位置，它现在的位置是在 1 号 还有 3 号盒子的中间。在样式表里，用 .box.two 作为样式选择器，选择 2 号盒子这个元素。把元素的 position 设置成 relative，暂时元素的位置并没有什么变化。下面再用 top 设置顶部的位置，比如 56 像素，再用 left，设置左边的位置，设置成 32 像素。

2 号盒子的位置现在发生了改变，现在的位置相对于它原来的位置，距离原来的顶部有 56 像素，距离原来的左边位置有 32 个像素。注意现在除了 2 号盒子以外，1 号还有 3 号盒子的位置并没有发生改变。也就是对元素进行相对定位的时候，不会影响整体的排版。

z-index

现在 2 号盒子跟 3 号盒子会重叠到一块儿，2 号会压在 3 号的上面。使用 z-index 这个属性可以调整定位元素的显示层级，它的值越大，级别也就是越高，级别高的元素会在级别低的元素的上面。

比如我想让 3 号压在 2 号的上面显示。在 .box.two 这块样式里，把 z-index 属性的值设置成 1 。

然后再添加一块样式，样式的选择器是 .box.three，用 position 把元素的定位设置成 relative。再设置一下 z-index 属性，它的值只要比 1 大，这个元素跟 2 号元素重叠的时候，就会覆盖在 2 号元素的上面显示。比如把它的值设置成数字 2 。

现在 3 号元素会盖住 2 号元素，2 号与 3 号元素都属于定位元素，3 号元素的 z-index 属性的值比 2 号元素的 z-index 属性的值大，所以当它们重叠的时候，3 号元素就会盖住 2 号元素。