CSS Positionierungselemente

Question

Ich baue eine mobile Webapp mit jquery mobile. Nun, was ich habe. Ich habe ein kollabierbares Element, wie Sie auf this link sehen können. Jetzt wird für jeden Datensatz, den ich von der Datenbank zurückbekomme, ein neues kollabierbares Element erstellt. Hier ist mein Code für das kollabierbare Element.

<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> 

Ich habe 2 Bilder ein Telefonsymbol und ein Mail-Symbol. Wie die Positionierung oben sind sie nur auf den ersten beiden Knöpfen in meinem ersten kollabierbaren Element. Aber was muss ich tun, damit diese Tasten auch auf meinen folgenden Tasten erscheinen?

Also meine Frage ist, wie kann ich diese 2 Tasten zum div mit ID = "Tasten" positionieren.

--EDIT-- Hier ist ein link auf der aktuellen Seite.

Mit freundlichen Grüßen

Stef

Answer 1

Wie ich vermutete, ist die absolute Positionierung der Icons der Täter. Sie positionieren die beiden Symbole mit position:absolute und einem oberen Offset, aber es gibt kein Element mit einem position:relative. Dies bedeutet, dass der Startpunkt für die Positionierung zurück zum Anfang der Seite fällt.

Mit anderen Worten, Ihre zweite (und dritte, vierte, etc, wenn Sie mehr Ergebnisse haben) Satz von Icons sind da, aber sie sind an der gleichen Stelle wie die ersten beiden Symbole: bei genau 290px und 360px von der ganz oben auf der Seite.

Stattdessen platzieren Sie die img mit dem Symbol innerhalb der <a> Element, das jedes Element ist, und relativ zu seiner Umgebung Position. Dies würde wahrscheinlich funktionieren:

<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

Sie müssen zuweisen position:relative den buttons divs, dann ändern Sie die erste img Position top:15px und die zweite img (das Telefonsymbol) zu sagen top:75px oder etwas angemessen.

Sie werden somit jedes img Element in Bezug auf es enthält buttons div. In Ihrem Beispiel stapeln sich alle Bilder, weil sie in Bezug auf das Fenster absolute positioniert sind.