如何定位按钮精灵css

我尝试过改变元素的位置，但它不起作用！它只是位于屏幕的一部分。如何使其显示在所需位置？

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

.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 .button1 {}