定位布局
定位属性:position
作用:指定元素的定位类型
取值:static
一、相对定位
关键字:position:relative
特点:相对不脱离文档流,并且是占有之前的位置,随之自身原来位置的左顶点进行位置偏移的
偏移量:
top 50px 往下移动50px -50px往上移动50px
left 50px 往右移动50px -50px往左移动50px
right和bottom同理可得
二、绝对定位
关键字:position:absolute
特点:脱离文档流,并且不占有之前的位置,随着页面的定点进行位置偏移。
三子绝父布局
举例:
1.首先创造两个正方形,用head1和head2类标签,且head2在head1里面
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLzkDO1MTMzAjMyIzMwEjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
2.使head1使用相对定位,使head2使用绝对定位,且head向左向下移动100px
由此可以看出黄色小方块使相对于蓝色大方块向下向右移动100px。
总结
相对定位是以自身为坐标,绝对定位默认以浏览器左上角为起始原点。
但是子绝父布局会以相对定位为原点,条件:必须在相对定位标签里面,即为子标签。