发表于: 2019-06-14 21:59:59
1 763
今天完成的事情:今天了解了static relative absolut fixed
在默认情况下,position的值就是static。
- relative:对象遵循正常文档流,依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。相对定位,今天通过一个简单的DEMO知道其相对的是自己原来的位置的定位。它占用文档空间,且top,right,bottom,left等属性不会移动文档空间。也就是说后面的元素依旧会以其原来位置进行的定位, 而前一元素的margin值会移动后面元素的文档空间。
- absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。其根据祖先类元素(父类以上)进行定位,且祖先类元素必须是以position的非static方式,直到追溯到html标签。值得注意的是在用absolute时,需要添加top,right,bottom,left属性中任一个,才会脱离文本流。而祖先类的margin会让子类absolute偏移。
- fixed:脱离正常文档流,并且能够根据top、right、left、bottom属性进行定位。(relative 和 fixed都是以bod进行的定位)
明天计划的事情: 完成任务4
遇到的问题:在对header进行编写时,去除 登录 相关内容时,界面发生改变 ,而后通过设定一定的header高而解决。
收获:初步明白了 relative absolute fixed 的基本内容
评论