position:absolute
总结出三个要点:
- 没有TRBL(top,right,bottom,left),以父级的左上角为参考点,没有父级的情况下是已浏览器的左上角 ,还有一种情况就是没有父级元素,但是存在文本,则应该以它的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方
- 设定了TRBL,而且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置有TRBL决定
- 设定了TRBL,父级元素也有设定position属性,,则以父级元素的左上角为原点进行定位,位置由TBRL决定,父级的padding对其不起作用。
综上三点,可以得出结论,要想一个定位为absolute的元素定位于其父级元素内部,条件如下: - 设定TBRL
- 父级设定position属性
position:relative
无论父级存不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的padding属性会对其影响
我们可以将position属性relative的div看做可以用TRBL来定位的普通div,而不仅仅可以使用float定位了
结论
- 属性为relative的元素可以用来布局页面,属性为absolute的元素可以用来定位某元素在父级中的位置
- 如果使用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部的某个位置的元素,最好用absolute,因为它不受父级元素的padding属性的影响
- relative元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素
应该在课后做一些练习巩固这些知识点!