一、相对定位
相对定位的概念: position属性的值为relative
1. 如果设置了相对定位,没有改变偏移量,则元素不会移动
2. 相对的位置是元素所在文档流的位置。
3. 设置了相对定位的元素,不会脱离文档流
4. 设置了相对定位的元素提高了自己的层级
5. 设置了相对定位的元素,本身的性质不会改变, 块依旧是块元素,行内依旧是行内元素
偏移量:
top: 数值是正值,表示向下移动
bottom: 数值是正值,表示向上移动 一般情况下top和bottom选择一个即可
left: 数值是正值,表示向右移动
right: 数值是正值,表示向左移动 一般情况下left和right选择一个即可
二绝对定位
绝对定位: 当属性position的值为absolute时,就开启的绝对定位
1. 如果设置了绝对定位,不改变偏移量,则该元素不会移动
2. 设置了绝对定位的元素会脱离文档流,如果下面的兄弟没有设置浮动或者定位则向上移动
3. 设置了绝对定位的元素的位置是相对于所在的包含块。
4. 设置了绝对定位的元素的性质会发生改变。 行内元素变成块元素, 此时所有的元素宽和高默认都是内容撑开的。
5. 设置了绝对定位的元素提高了层级。
包含块:
如果设置了绝对定位,那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。
如果所有的祖先块元素都没有设置定位,那么就是相对html这个根元素来说的。
建议:包含块尽量设置相对定位,因为相对定位不会脱离文档流。
简而言之:最近的设置了相对定位的祖先块称之为包含块。
HTML:是所有元素的初始包含块。