.exam{
position:relative;
float:right;
top:10px;
}
.exam2{
float:right;
margin-top:10px;
}那就在这里稍微详细介绍一下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属性。
看题主的代码，主要是说margin-top和position: relative + top的组合之间的区别（它们看起来都可以做垂直方向位置偏移）：
(1). 请理解两个样式设置的概念，布局和渲染。布局是指，在当前样式设置下，由浏览器计算得到的页面各元素的位置。渲染是指，最终在浏览器内呈现为可视内容的情况，是一种视觉效果。它们都由浏览器实现，布局计算在前，视觉渲染在后。
margin-top来实现位置偏移，是修改了布局。而·position: relative + top的组合实现位置偏移，并不修改布局，而是修改渲染，是一种单纯的视觉效果，这种方式也常会带来和相邻元素重叠的情况。
用一个例子可以体会一下不同。在一个父元素内排列多个题主给的.exam元素，那么效果是这样：
排列多个.exam2元素，则是这样：
(2).position: relative还有很多其他作用，这样和top等属性搭配修改视觉渲染的位置，只是其中一种用法。毕竟，top和margin-top是两个不同的样式属性。
position:relative;本身有很多作用，你这里没用到而已
补充楼上的答案，
在布局的时候 使用 position: relative 之后，尽量不要用 top, left, right, bottom 等属性去指定它的位置，因为它在文档流中的位置没有被释放，很容易造成其他元素排列布局不对的问题。
position: relative 更多的是用在，它的 子元素 需要固定在 它 的哪个位置显示时用的。
比如说：
.outer {
position: relative;
}
.inner {
position: absolute;
top: 10px;
}
<div class=“outer”>
<div class=“inner”></div>
</div>其中的 top: 10px 就是相对它的父元素 .outer 。
如果 .outer 中没设置 position 属性，就会继续往上找，直到 body 元素。
关键在于float让元素脱离了文档流，影响很大，单独一个元素比较可能看不出来，你加几个不带float的同级元素对比一下，看看
这么说不如用
position：absolute;
top:xx;