div+css怎么把模块放在最底层

div+css怎么把模块放在最底层

在div+css的网页布局中，主要通过position定位属性和z-index属性来设置模块之前的层级关系，z-index值越小，越在最底层。下面小编举例讲解div+css怎么把模块放在最底层。

新建一个html文件，命名为test.html，用于讲解div+css怎么把模块放在最底层。

在test.html文件内，使用div标签创建一行文字，作为最上层的模块。

在test.html文件内，使用div标签创建一个模块，同时设置div标签的class属性为bot，主要用于下面通过该class来设置css样式。

在test.html文件内，编写标签，页面的css样式将写在该标签内。

在css标签内，设置类名为bot的div样式，使用width属性设置div的宽度为100px，使用height属性设置div的高度为100px，使用background属性设置div的背景颜色为红色。

在css标签内，再通过position属性设置类名为bot的div的位置属性为绝对定位，使用top属性设置其在页面的顶部，即与上层div重叠，最后，将z-index设置为-1，即把该div模块设置为最底层。

在浏览器打开test.html文件，查看实现的效果。

1、创建一个test.html文件。2、在文件内，创建两个div模块，一个div作为最上层，另一个div作为最底层。3、在css标签中，设置最底层div的样式，定义其宽度、高度，使用position属性设置其为绝对定位，并使用top属性设置其与最上层div位置重叠，通过将z-index属性设置为-1，让它在最底层。