本节课来学习定位布局的使用方法,学完本课内容后,同学们可以在下方评论区进行留言,作业也可以在评论区进行提交,老师会一一解答。
那我们开始学习吧。
1. 定位分为相对定位,绝对定位,固定定位,具体使用方法如图所示。
2.打开【DW】,新建文件,分别创建两个【div】,设置相应的【style】样式,给子级【div】加一个【position:relative 】相对定位,并添加偏移属性,具体代码如图所示。
3.再次创建两个【div】,同样的方式加一个【position:relative 】相对定位,并添加偏移属性,具体代码如图所示。
4.继续添加一个【h1】标题,将代码保存,回到网页进行刷新查看,效果如图所示。
5.回到代码页面,分别添加【z-index】属性,设置层级关系,代码如图所示。接下来是绝对定位的使用方法,新建文件,分别创建两个【div】,设置相应的【style】样式, 具体代码如图所示。