3分钟带你了解布局

定位布局

定位属性：position
作用：指定元素的定位类型
取值：static

一、相对定位

关键字：position：relative
特点：相对不脱离文档流，并且是占有之前的位置，随之自身原来位置的左顶点进行位置偏移的
偏移量：
top 50px 往下移动50px -50px往上移动50px
left 50px 往右移动50px -50px往左移动50px
right和bottom同理可得

二、绝对定位

关键字：position：absolute
特点：脱离文档流，并且不占有之前的位置，随着页面的定点进行位置偏移。

三子绝父布局

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

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


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

总结

相对定位是以自身为坐标，绝对定位默认以浏览器左上角为起始原点。
但是子绝父布局会以相对定位为原点，条件：必须在相对定位标签里面，即为子标签。