现在页面上有个白色背景的大盒子，里面有三个小盒子。要定位元素可以使用 tailwind 提供的定位相关的类，比如想要相对定位可以在元素上添加一个 relative，在这个 2 号盒子上面，添加一个 relative。 这个类就是把元素的 position 属性设置成了 relative。

然后再用 tailwind 提供的 top，right，bottom 还有 left 相关的类，设置定位的位置。添加一个 top-16，再添加一个 left-8 。

你会发现 2 号盒子的位置会发生一些变化，它的位置发生了变化，并没有影响其它人。

对 2 号盒子做了相当定位以后，它盖住了 3 号盒子的其中的一小部分，我们可以用 z-index 控制元素的层次，比如我想让 3 号盒子覆盖在 2 号盒子的上面。

先得给它添加一个定位，比如 relative，然后用 z 前缀的类，比如 z-10，现在 3 号盒子就会排在 2 号盒子的上面。 这种类就是设置了一下元素的 z-index 属性。z-10 把 z-index 的值设置成了 10，这个值越大，元素的层次就越靠上。

比如在这个 2 号盒子的上面，添加一个 z-20，它会把元素的 z-index 设置成 20， 20 大于 10 ，所以现在 2 号盒子又会覆盖在 3 号盒子的上面。