最近在学习css,有个疑问，用relative+top与用float+margin-top有什么区别，感觉都能有同样效果
.exam{
position:relative;
float:right;
top:10px;
}
.exam2{
float:right;
margin-top:10px;
}
写回答
-
码农|Coder| Pythonista那就在这里稍微详细介绍一下relative absolute和 float吧
1.position：relative和position：absolute都可以激活left、top、right、bottom和z-index属性（默认情况是不激活的，设置了也是无效的），在默认情况下，所有元素都是在z-index：0这一层，这就是所谓的文档流。
当设置relative和absolute时，元素其实会浮起来，即z-index大于0，不同的是relative会保留自己在z-index：0中的占位；而absolute会完全脱离文档流。absolute的left、top之类的属性是相对于自己最近的一个设置了relative或者absolute的祖先元素，如果找不到，则相对于body。2.float也是可以改变文档流的，但是它不会让元素浮起到另外一个z-index层，它让元素仍然保持在z-index：0层，它是无法通过left、right属性来准确控制元素坐标的，而是通过float：left或者float：right控制元素在同层的左浮动或者右浮动。同时，float会改变正常的文档流排列，影响到周围元素。
3.还有一个很明显的区别，你可以去firbugf12验证一下：ansolute和float会隐式改变元素的display属性类型，无论什么类型的元素（除了display：none），只要设置了position：absolute或者float：left，元素都会以display：inline-block的方式显示（即可以设置长宽，默认宽度不满足父元素），而position：relative不会改变display属性。
2019-07-17 19:26:41赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
