CSS位置決め要素

Question

jquery mobileを使用してモバイルWebアプリケーションを構築しています。今私が持っているもの。私はあなたがthis linkに見ることができるような、巧みな要素を持っています。データベースから戻ってくるレコードごとに、新しい協調的要素を作ります。ここでは、私のコードは、先進的な要素です。

<div data-role="collapsible"> 
      <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3> 
       <div id="buttons"> 
        <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~</a> 
        <img style="position:absolute;top:290px;right:45px;" src="images/mailIcon.png" width=32 height=32 /> 
        <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~</a> 
        <img style="position:absolute;top:360px;right:45px;" src="images/phoneIcon.png" width=32 height=32 /> 

       </div> 
      </div> 

私は2つの画像に電話アイコンとメールアイコンがあります。上記のポジショニングと同様に、最初の2つのボタンの上にあるだけです。しかし、これらのボタンが次のボタンにも表示されるようにするには、どうすればよいですか？

私の質問は、どのようにID = "ボタン"を使ってdivに2つのボタンを置くことができるかということです。

--EDIT-- 実際のページにはlinkがあります。

敬具、

ステフ

Answer 1

私が思ったように、アイコンの絶対的な位置は犯人です。 position:absoluteと上のオフセットを使用して2つのアイコンを配置していますが、その周りにはposition:relativeという要素はありません。これは、測点の開始点がページの先頭に戻ることを意味します。

言い換えれば、さらに多くの結果があれば2番目（3番目、4番目など）のアイコンがありますが、最初の2つのアイコンと同じ場所に配置されています：正確に290pxと360pxページの上部。

代わりに、それぞれの項目である<a>要素内のアイコンを使用してimgを配置し、周囲に相対的に配置します。これはおそらく働くだろう：私たちは間違って起こっている正確にものを見ることができるように

<div data-role="collapsible"> 
    <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3> 
     <div id="buttons"> 
      <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~ 
       <img style="float:right;margin:5px 15px" src="images/mailIcon.png" width=32 height=32 /> 
      </a> 

      <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~ 
       <img style="float:right;margin:5px 15px" src="images/phoneIcon.png" width=32 height=32 /> 

      </a> 
      </div> 
     </div> 

Answer 2

あなたはtop:75pxまたは適切な何かを言うためにtop:15pxへの最初のimg位置と第二のimg（電話アイコン）を変更、その後、buttonsのdivにposition:relativeを割り当てる必要があります。

したがって、imgの各要素は、buttons divを含む位置に配置されます。 あなたの例では、すべての画像は、ウィンドウに関連して配置されたabsoluteであるため、スタックアップします。