如何使用CSS属性z-index设置元素堆叠顺序

2024-10-12 04:47:46

1、第一步,创建web项目Page,这时该项目下有默认的页面index.html,就以这个页面作为实例操作页面,默认是HTML5模板,如下图所示:

如何使用CSS属性z-index设置元素堆叠顺序

3、第三步,分别给上述class设置样式,依此设置z-index为1、2、3、4,如下图所示:

如何使用CSS属性z-index设置元素堆叠顺序

5、第五步,如果不设置偏移量,几个div模块会堆叠起来,不好区分,下面给从第二个div设置top、left属性,居上和居左,如下图所示:

如何使用CSS属性z-index设置元素堆叠顺序
猜你喜欢