为了账号安全,请及时绑定邮箱和手机立即绑定

关于absolute的问题求教

老师,这里的position:absolute的作用是什么呢?我发现把这个去掉,就不能只显示一只小鸟。用overflow:hidden也是不能的。应该不是简单的定位,让top:20%;

正在回答

2 回答

因为设置absolute会使元素脱离文档流。

     如果没有“min-width:91px;min-height: 71px;”这两条但是存在“position:absolute”这条代码的话你应该什么都看不到,因为没有为这个元素设置宽和高。元素在没有脱离文档流的情况下宽和高可以从父元素继承,但脱离之后无处继承,所以height与width都是0。因此老师为其设置了min-width和min-height,然后我们便可以看到只有一只小鸟在煽动翅膀。

    而在你删除position:absolute之后,宽和高都从父元素继承,那么你可以看到一排的小鸟。

    实际上,将宽和高设置为“width:91px;height: 71px;”的话,就无所谓继承的问题了,那么不管你的position设置成absolute还是relative抑或是不设置显示情况都没有问题。


0 回复 有任何疑惑可以回复我~

absolute的作用其实就是能够使用left和top方法。其实在实际运用中我们是将absolute和relative一起用的。一个块里面有另一个块,小块设置absolute,大块设置relative,此时则相对大块可以设置小块的left和top。如果没有设置,则默认是相对于整个页面设置其left,top;

0 回复 有任何疑惑可以回复我~
#1

鸣人与路飞 提问者

恩恩,这个我能明白,如果这个例子里面我不要absolute,就是我不需要定位的话,我把这个去掉,精灵图就不能显示一只小鸟而是3个小鸟都显示出来了。absolute好像让精灵图只显示出1个来了。但是我不明白为什么??求赐教啦
2016-01-06 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
H5+JS+CSS3 实现圣诞情缘
  • 参与学习       121929    人
  • 解答问题       211    个

为圣诞节准备的H5+JS+CSS特效案例教程,实现静与动的结合

进入课程

关于absolute的问题求教

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信