有两种方法来：
方法一：绝对定位布局，利用定位，可以将按钮放到任意位置
1）将包含按钮的父级标签设置为相对定位
.d2{
width:500px
height:300px
background:#660099
position:relative/*设置源相对定位*/
}
2）将按钮设置为绝对定位，百设置左边的距离，顶部的距离
.btn2{
background:#99ff00
position:absolute
left:100px
top:120px
}
3）运行查看结果：度按钮02 离左边100px ,顶部120px
方法二：浮动定位，利用设置按钮为浮动，缺点是不能很精确的定位到某个位置
1）代码如下：利用float:right 设置靠右
2）运行结果如下：
总结：如果需要定位到某个精确的位置，采用定位布局，即方法一
悬浮按钮只需要设置按钮positi的属性为fixed即可。
例子：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动按钮</title>
<style>
*
{
margin: 0px
padding: 0px
}
#container
{
width: 1000px
height: 3000px
background-color: #1b6d85
margin: auto
}
#div1
{
height: 600px
background-color: #255625
}
#div2
{
height: 600px
background-color: #c0a16b
}
#div3
{
height: 600px
background-color: #b92c28
}
#div4
{
height: 600px
background-color: #449d44
}
#div5
{
height: 600px
background-color: #999999
}
.btn-style
{
width: 30px
height: 120px
position: fixed/*此处即是固定按钮位置的属性。*/
left: 1500px
top: 400px
}
</style>
</head>
<body>
<button class="btn-style">这是一个浮动按钮</button>
<div id="container">
<div id="div1">第一节</div>
<div id="div2">第二节</div>
<div id="div3">第三节</div>
<div id="div4">第四节</div>
<div id="div5">第五节</div>
</div>
</body>
</html>
效果图：
