web-dev-qa-db-ja.com

CSS-画像内のボタンの位置

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

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

これは、ボタンの画像を別の場所に配置することで、画像を左から右および下に移動しますが、ボタンは、元々divの右端に配置されていた場所からバーでクリック可能になりました。これを試してみると

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

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

注：ボタンはdiv内にあり、cssなしで中央の画像の上に配置されます

htmlcssbuttonclientclient-side
6
Kevin

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

6
Nick

これに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のスペースを置きます。

1
Shawn Lehner

以下の例を見てください。前と次のボタンが上にある画像。 enter image description here

 <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 =======================質問すると、次のことと前のことをどのように扱うかについて説明します。これは実際の例ですが。

1
Daniel Adenew