7

画像を含む div があります。これを行うときは、画像内のボタンを画像の右上隅に配置する必要があります。

#button_id{
position: relative;
    left: 270px;
    top: 30px;
}

これが行っているのは、ボタン画像を別の場所に配置することです。画像を左右に移動しますが、ボタンは、div の右端に配置されていた場所からバーでクリックできるようになりました。これを試すと

#button_id{
     position: relative;
     float: right; padding: 0px -40px -15px;
}

ボタンを右に移動しますが、下には移動しません。

注: ボタンは div 内にあり、css がなければ中央の画像の上に配置されます

4

3 に答える 3

6

画像を含む divposition:relativeと、その div 内に含まれるボタンを指定する必要がありますposition:absolute。これにより、コンテナ div を基準にしてボタンが配置されます。

于 2012-06-27T15:17:22.163 に答える
2

以下の例を見てください: その上に前と次のボタンがある画像。 ここに画像の説明を入力

 <div class="thumbnail rec thmbnail-large">
    <img class="img-thumbnail img-thumbnail-large-0 img-responsive" src="http://daniel-ethiopia.rhcloud.com/nivo/2.jpg" data-holder-rendered="true"  width="100%" style="margin-left:0px;height:auto;">
    <input type ="button" class="classic_button_next btn btn-primary btn-large" id="next_button" value="Next >>"/>
    <input type ="button" class="classic_button_prev btn btn-primary btn-large" id="prev_button" value="Previous <<"/>            
 </div>

CSS============================================

<style type="text/css">
.classic_button_next{ position: absolute; right: 5px; top: 5px; }
.classic_button_prev { position: absolute; right: 88px; top: 5px; }
<style>

jscript =====================

于 2016-02-25T13:54:00.237 に答える
1

これに img タグを使用する特定の理由がない場合は、次のような div 構造を使用します。

<div id="my_image">
<button id="button_id" />
</div>

ボタンを正しく配置するには、div 位置を「相対」に、ボタン位置を「絶対」に設定します。これは、ボタンの絶対位置がラッピング div の左上に基づくことを意味します。

この CSS の例は次のようになります。

#my_image { position: relative; }
#button_id { position: absolute; right: 5px; top: 5px; }

上記の CSS は、ボタンと div の角の間に 5px のスペースを空けて右上にボタンを配置します。

于 2012-06-27T15:19:49.553 に答える