css - 画像の片隅にある画像にボタンを追加するにはどうすればよいですか？

Question

画像上部の3か所にボタンを配置したい

1. 画像の左下隅
2. 画像の右下隅
3. 画像の中央。（オプション）...

これらのボタンを画像の上部に配置する方法。

<img src="images/default_image.png" style="width:90%" id="mImage"  /> 

Answer 1

これは、jQueryやjQuerymobileとはまったく関係ありません。シンプルなHTMLとCSSで実行できます。私がそれを行う方法の例については、このフィドルを参照してください：http: //jsfiddle.net/rHaPH/22/

Answer 2

これを試して：

<div id="div-1">
  <img src="../img/logo.png" style="width:90%" id="mImage">
  <div id="div-1a" data-role="fieldcontain">
    <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  </div>
  <div id="div-1b" data-role="fieldcontain">
    <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  </div>
</div>

これとともに：

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 bottom:0;
 left:0;
}
#div-1b {
 position:absolute;
 bottom:0;
 right:0;
}

これをJSフィドルにコピーすると、JQMobileを使用して機能します。JQMのcssurlを必ず含め、JSフィドルにJQueryを追加するときは必ずJQMobileにチェックマークを付けてください。

アップデート：

また、JQMobileが実行時にボタンとなるDOMにスパンタグを挿入することにも注意する必要があります。これは、私が提供したcssは概念的には問題ないことを意味しますが、セレクターは（divタグのIDを使用するのではなく）それらのスパンタグを指す必要があります。

Answer 3

今日のように、jQuery mobile v1.3.2では、次の方法で実装しました。

<div data-role="page">
   <div data-role="content">
      <div id="wrapper">
         <div id="button">
            <a href="#" data-role="button">Button</a>
         </div>
         <img src="i.jpg">
      </div>
   </div>
</div>

そして次のcssで：

#wrapper{ position:relative; }
#button{ position:absolute; top: 10px; left:0px; z-index:10; }
img{max-width:100%; }

いくつかのスタイルはおそらくあなたが望むものには必要ありませんが、私は自分のコードからコードサンプルを取り出しました。

ラッパーdivは相対位置にあるため、その内容を絶対的に配置できます。

ボタンdivのz-indexは、画像の上に配置されていることを確認するためのものです。

必要な数のボタンを追加し、上、左、右、ボタンのcssプロパティを変更して、画像内でボタンを移動できます。

jsFiddleでの実例