2

Web ページの絶対配置に問題があります。

ボタンを親に対して相対的に配置したいのですが、これが私がしたことです:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0px;
  left: 0px;
}

.button {
  height: 55px;
  width: 180px;
  background-color: transparent;
  border-color: transparent;
  background: url(Button.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
<div class="parent" align="middle">
  <img src="http://via.placeholder.com/1900" width="1900px" />
  <div class="child">
    <button class="button">Button</button>
  </div>
</div>

このコードは、ボタンが本来あるべき画像ではなく、ウィンドウに対して相対的な位置になるようにするため、ズームアウトまたはズームインすると、同じ相対的な位置ではなく、画像内でボタンが移動します。

4

2 に答える 2

2

これがあなたが達成したいことだと思います

ここに解決策がありますto your problem..。

以下は、更新された css です。

   .parent {
        position: relative;
   }
   .child{
        position: absolute;
        top: 0px;
        left:0px;
   }
   .button {
       height: 55px;
       width: 180px;

       background-size: 100% auto;
       background-repeat: no-repeat;
   }
于 2013-09-12T14:58:20.600 に答える
0

ポジショニングが思い通りにいかなかったようです。画像を中央に配置したいだけだったので、次のようにしました。親から位置を削除し、画像上の位置を相対に変更しました。次に、画像に対してボタンを配置しました。これを試して：

HTML

<div class="parent">
    <img src="background.png" width="400px" />
    <div class="child">
        <button class="button"></button>
    </div>
</div>

CSS

.parent {
    text-align:center;
}
.child {
    position: relative;
}
.button {
    height: 55px;
    width: 180px;
    background-color: transparent;
    border-color:transparent;
    background: url(Button.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position:absolute;
}

JSFiddle

于 2013-09-12T15:00:27.277 に答える