1、新建一个html文件,命名为test.html
2、在test.html文件内,使用css设置页面所有的div宽度为300px,高度为300px,div的位置为绝对定位。
3、在test.html文件内,创建三个div,并用文字标识,分别为底层div、中层div、最顶层div。
4、在test.html文件内,分别给三个div设置class属性为one、two、three,用于下面对类名进行样式设置。
5、在css标签内,设置类名为one的div样式,设置其背景颜色为红色,距离页面左边缘为0,距离页面上边缘为0,同时使用z-index设置其层级为1。
6、在css标签内,设置类名为two的div样式,设置其背景颜色为黄色,距离页面左边缘为50px,距离页面上边缘为50px,同时使用z-index设置其层级为2,即在类名为one的div的上面。
7、在css标签内,设置类名为three的div样式,设置其背景颜色为粉红色,距离页面左边缘为100px,距离页面上边缘为100px,同时使用z-index设置其层级为3,即在页面三个div中的最顶层。
8、在浏览器打开test.html文件,查看实现的层级效果。
工具/材料:电脑。
css让文字显示在图片上的操作步骤如下:
1、首先在div里面书写文字,然后放入1张图片。
2、这时应该先给div设置宽度和高度,保证文字有1个范围。
3、然后通过background给div添加1张图片作为它的背景。
4、然后通过url()来连接图片,这个时候url里面放置的就是背景图片的路径。
5、然后放入1张图片用作背景,注意路径正确。
6、最后点击保存,文字就会覆盖在图片上,css让文字显示在图片上的问题就解决了。
方法:设置div样式z-index
:auto
auto可定义为一个值(整数数字),越大代表越置前,如可定义为:
z-index:999。
前提是div是定位元素。