用户登录

现在页面上有个白色背景的大盒子,里面有三个小盒子。要定位元素可以使用 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 号盒子的上面。

定位:Position《 Tailwind 样式框架:布局 》

统计

13299
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点