可以使用css中的position来对div进行定位来改变div的位置，position可能的值如下：
工具原料：编辑器、浏览器
1、通过设置一个div的position的值来调整div的位置，简单的代码示例如下：
body><div id="div2"></div>
<style>
div{
border: 1px solid red
width: 200px
height: 200px
position: absolute
right: 200px
bottom: 200px
}
</style>
</body>
2、设置一个宽高为200像素的div距body的右边200像素底部200像素，运行的效果如下图：
用margin-top的属性设置按钮的位置。
假设按钮的class为btn，向上移动10像素。
css：
.btn{
margin-top: -10px
}
margin：设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
允许使用负值。
扩展资料：
CSS 外边距：
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。
因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top、margin-right、margin-bottom、margin-left。
可以
Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值，它的语法如下：
transition: property duration timing-function delay/*
property：执行过渡的属性
duration：执行过渡的持续时间
timing-function：执行过渡的速率模式
delay：延时多久执行
*/
transition-property
可取值：
none
没有属性会获得过渡效果。
all
所有属性都将获得过渡效果。
property
定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
div{transition-property:width-moz-transition-property: width/* Firefox 4 */-webkit-transition-property:width/* Safari 和 Chrome */-o-transition-property:width/* Opera */}
transition-duration
参数为时间，单位为s（秒）或者ms（毫秒），默认就是0，回想一下如果只有transform属性，是不是变换啪地一下完成了。
div{transition-duration: 5s-moz-transition-duration: 5s/* Firefox 4 */-webkit-transition-duration: 5s/* Safari 和 Chrome */-o-transition-duration: 5s/* Opera */}transition-timing-function
既然是动画，那么就有动画的运行速率，不同的速度会产生不同的结果，以下是可取值。
ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
速率示意图
transition-delay
参数为时间，单位为s（秒）或者ms（毫秒），默认就是0，也就是立即执行，如果在多个动画直接有先后顺序，那么它就会派上用场。
把它们写在一起
浏览器内核的前缀不能忘啊，使用emmet神器来帮助你。
emmet使用如图所示：
-webkit-transition: all 0.5s ease-in-out 0s-o-transition: all 0.5s ease-in-out 0s
transition: all 0.5s ease-in-out 0s
如图所示
将它们放在一起的效果如下，可以很明显的发现它们之间的不同。
