天天看点

3分钟带你了解布局一、相对定位二、绝对定位三子绝父布局总结

定位布局

定位属性:position

作用:指定元素的定位类型

取值:static

一、相对定位

关键字:position:relative

特点:相对不脱离文档流,并且是占有之前的位置,随之自身原来位置的左顶点进行位置偏移的

偏移量:

top 50px 往下移动50px -50px往上移动50px

left 50px 往右移动50px -50px往左移动50px

right和bottom同理可得

二、绝对定位

关键字:position:absolute

特点:脱离文档流,并且不占有之前的位置,随着页面的定点进行位置偏移。

三子绝父布局

举例:

1.首先创造两个正方形,用head1和head2类标签,且head2在head1里面

3分钟带你了解布局一、相对定位二、绝对定位三子绝父布局总结
3分钟带你了解布局一、相对定位二、绝对定位三子绝父布局总结

2.使head1使用相对定位,使head2使用绝对定位,且head向左向下移动100px

3分钟带你了解布局一、相对定位二、绝对定位三子绝父布局总结
3分钟带你了解布局一、相对定位二、绝对定位三子绝父布局总结

由此可以看出黄色小方块使相对于蓝色大方块向下向右移动100px。

总结

相对定位是以自身为坐标,绝对定位默认以浏览器左上角为起始原点。

但是子绝父布局会以相对定位为原点,条件:必须在相对定位标签里面,即为子标签。