Posted on | by liu
CSS样式可以帮助大家控制网页中不同元素的位置和样式，其中按钮也是大家常见的一个元素。下面大家来介绍一下如何使用CSS样式来控制按钮的位置。
首先，大家需要在HTML中添加一个按钮元素，代码如下：
<button>点击偶</button>
接下来，大家使用CSS样式来为按钮添加样式。在样式表中，大家可以使用position属性来控制元素的位置。其中，position属性一共有四个取值：static、relative、absolute和fixed。大家在此只介绍前三个取值。
1. static取值
static是position属性的默认值，表示元素的位置即为其在HTML文档中的位置，不会受到其他样式的影响。因此，大家不需要添加任何CSS样式来控制按钮的位置。
2. relative取值
relative表示相对定位，其位置相对于元素本来的位置发生改变，但是不会影响其他元素的位置。大家可以使用top、bottom、left和right属性来控制相对位移。例如，大家将按钮往右移动10像素：
button {
position: relative;
left: 10px;
}3. absolute取值
absolute表示绝对定位，其位置相对于其第一个position取值不为static的父元素发生改变。如果没有找到父元素，则相对于浏览器的窗口定位。大家同样可以使用top、bottom、left和right属性来控制相对位移。例如，大家将按钮距离父元素的左边框为100像素，距离父元素的上边框为50像素：
button {
position: absolute;
left: 100px;
top: 50px;
}综上所述，大家可以使用position属性来控制按钮的位置，分别使用static、relative和absolute取值来实现不同的效果。希望这篇文章对你有所帮助。