如何定位按钮精灵 css

.button1{


  background: #E68A00 url(wooden.jpg) repeat-x;
  border: 2px solid #eee;
  height: 28px;
  width: 115px;
  margin: 50px 0 0 50px;
  padding: 0 0 0 7px;
  overflow: hidden;
  display: block;
  text-decoration:none;
  font-family: 'Sacramento', cursive;
  color : white;
  font-size: 30px;



  /*Rounded Corners*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;


}

pg.button1{ 
position:relative;
left:300px;
top:0px;

}

p2.button1{ 
position:absolute;
right:0px;
top:150px;

}

p3.button1{ 
position:absolute;
right:0px;
top:200px;

}

.button1:hover {
  width: 200px;
}

我尝试过更改元素位置但不起作用！它仅位于屏幕的一部分。我如何让它显示在我想要的位置？

pg、p2、p3 不是正确的 HTML 标签。可能您创建了具有此类名称的 ID，然后将其更改为：

#pg .button1 {}

要么选择position absolute or relative.