Positionieren Sie ein Element basierend auf der Position eines anderen Elements, indem Sie nur CSS verwenden

Ich habe eine einfache Möglichkeit zum Anzeigen von Hilfetexten, die wie ein Popup-Fenster aussehen, nur mit CSS verwendet. Es funktioniert gut, außer dass das Popup-Fenster standardmäßig linksbündig ist. Ich möchte, dass das Fenster näher am Symbol ist, als was (in meinem Beispiel) "left: 360px;" würde zeigen. Da sich die Position des Schwebesymbols ändern kann, weiß jemand, wie Sie die Position des Popup-Fensters basierend auf der Position des Symbols "Schwebend über" festlegen können. Wir verwenden jQuery und Prototype, aber ich würde lieber nur CSS verwenden, so dass der gleiche Code für beide Seiten verwendet werden könnte. Vielen Dank.Positionieren Sie ein Element basierend auf der Position eines anderen Elements, indem Sie nur CSS verwenden

Hier ist mein Beispiel:

EDIT: Dies wurde bereits beantwortet, aber hier ist der feste Code, falls jemand anderes ist für eine einfache Möglichkeit sucht eine Popup-Meldung angezeigt wird, wenn über ein Symbol schwebt. Auch hier ist ein Beispiel dafür auf jsfiddle.net: http://jsfiddle.net/zDADW/

Übrigens, wenn jemand weiß, warum jemand diese Rangliste ein (zum Zeitpunkt des Schreibens klickte jemand den Abwärtspfeil für diese Frage), lass es mich wissen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <title>Show help text when hovering using CSS</title> 
      <style type="text/css"> 
       #help:hover #help_popup { 
        /*If you hover over the help icon, show the help_popup span*/ 
        display: block; 
       } 

       #help { 
        /*This is the part I was missing*/ 
        position: relative; 
       } 

       #help_popup { 
        /*Normally, hide this span*/ 
        display: none; 
        position: absolute; 
        width: 15em; 
        padding: 10px; 
        background: #CFF; 
        color: #000; 
        border: 3px solid; 
        text-align: center; 
        left: 10px;  /*this is still needed even if it's 0*/ 
       } 
      </style> 
    </head> 
    <body> 
     <div> 
      This shows a popup window using CSS when you mouse over an image. 
      <div> 
       Hover over the question mark for a popup help window. 
       <span id="help"> 
        <img src="questionmark.png" alt="[?]"/> 
        <span id="help_popup"> 
          This is the normally hidden help text. 
         <br/>It only shows up when you hover over the question mark. 
        </span> 
       </span> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2013-03-27 rrtx2000

Fügen Sie Ihrem CSS #help { position: relative; } hinzu. Dadurch kann das absolut positionierte Element seine Position relativ zum Element #help berechnen. Sie werden wahrscheinlich feststellen, dass Sie die left Eigenschaft verringern möchten, sobald Sie diese Änderung vornehmen.

jsFiddle demo

Quelle

2013-03-27 14:59:52 thirdender

Dank! Es funktioniert wie ein Champion! – rrtx2000

Ich würde dich wählen, aber ich habe nicht den Ruf. – rrtx2000

Danke :-) Es ist alles gut. – thirdender

Positionieren Sie ein Element basierend auf der Position eines anderen Elements, indem Sie nur CSS verwenden

Antwort

Verwandte Themen