css - ボタンスプライトCSSの配置方法

Question

.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;
}

要素の位置を変更しようとしましたが、うまくいきません! 画面の一部に収まっているだけです。希望の位置に表示するにはどうすればよいですか?

Answer 1

pg、p2、p3 は適切な HTML タグではありません。おそらく、そのような名前で ID を作成してから、次のように変更します。

#pg .button1 {}

position absoluteまたはを選択しますrelative。