Posizionare un elemento in base alla posizione di un altro elemento utilizzando solo CSS

Ho creato un modo semplice per visualizzare il testo della guida simile a una finestra popup utilizzando solo CSS. Funziona bene tranne che per impostazione predefinita la finestra popup viene lasciata giustificata. Vorrei che la finestra fosse più vicina all'icona stessa come nel mio esempio "left: 360px;" mostrerebbe. Poiché la posizione dell'icona di passaggio del mouse può cambiare, qualcuno sa come impostare la posizione della finestra di popup in base alla posizione dell'icona posizionata sopra il puntatore del mouse? Usiamo jQuery e Prototype, ma preferirei usare solo CSS, quindi lo stesso codice potrebbe essere usato su entrambi i tipi di pagina. Grazie.Posizionare un elemento in base alla posizione di un altro elemento utilizzando solo CSS

Ecco il mio esempio:

EDIT: Questo è stato già risposto, ma qui è il codice fisso nel caso in cui nessun altro è alla ricerca di un modo semplice per visualizzare un messaggio pop-up quando si passa sopra un'icona. Inoltre, ecco un esempio di esso su jsfiddle.net in modo che tu possa facilmente provarlo: http://jsfiddle.net/zDADW/

A proposito, se qualcuno sa perché qualcuno lo classificherà in basso uno (al momento della stesura di questo qualcuno ha fatto clic sulla freccia giù per questo domanda), per favore fatemelo sapere.

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

fonte

2013-03-27 rrtx2000

Aggiungi #help { position: relative; } al tuo CSS. Ciò consentirà all'elemento posizionato in modo assoluto di calcolare la sua posizione relativa all'elemento #help. Probabilmente troverai che desideri diminuire la proprietà left dopo aver apportato questa modifica.

jsFiddle demo

fonte

2013-03-27 14:59:52 thirdender

Grazie! Funziona come un campione! – rrtx2000

Ti voterei ma non ho la reputazione. – rrtx2000

Grazie :-) Va tutto bene. – thirdender

Posizionare un elemento in base alla posizione di un altro elemento utilizzando solo CSS

risposta

Problemi correlati