piazzare un div sopra ad altri div (senza spostarli)

[markzzz]

Salve.

io dovrei fare una cosa di questo tipo :
quando passo sopra ad un link con il mouse, deve aprirmi un div (che conterrà del testo) e visualizzarlo, per esempio, di fianco al link. Però deve mettersi "sopra agli altri div", senza spostarli (in modo da creare una specie di piccolo div popup).

Credo basti del css...ma non ho idea che propietà usare.

Idee? Ciao

[Mich_]

La stessa tecnica viene usata in alcuni tipi di menu (es. quelli a tendina), per cui per i dettagli tecnici ti rimando alle raccolte di menu (alcune sono citate nei "link utlii" - vedi ad es quelli di CSSplay)

Il blocco che deve "comparire" deve esistere nella pagina con display:none e position:absolute (e precisamente all'interno del blocco che lo fa visualizzare)
all'evento :hover l'attributo deve trasformarsi in display:block

[markzzz]

grazie per la risposta. Il fatto è questo (forse dovevo specificarlo).

Io ho vari link, posizionati quà e là. Quando ci passo sopra con il mouse, dovrei fare una chiamata jquery che mi carica dinamicamente il contenuto nel div. Fatto ciò, lo rendo visibile e lo posiziono vicino al link.

Ho letto delle posizioni :absolute e :fixed. Dovrebbero fare al caso mio. Solo non sò come modificare la posizione per ogni link...

[Mich_]

Se i contenuti sono dinamici, il CSS da solo non basta: devi usare tecniche tipo AJAX (che utilizza JS, per cui le trovi nel forum javascript).

Per il posizionamento, alcuni menu usano proprio quella tecnica; altri strumenti che la usano sono le gallerie.
Devi solo scegliere quelli che fanno al caso tuo.

In effetti non devi modificare la posizione, ma lasciarla dove e`.

esempio:

HTML:
<div ...>
  altro materiale
  <p class="visual_popup">testo su cui passare
    <span id="...">&amp;nbsp;</span>
  </p>
  altro materiale
</div>

CSS:
p.visual_popup {
  position: relative;       /* nota che questo permette l'absolute dello <span> */
}
p.visual_popup span {
  display: none;
}
p.visual_popup:hover span {
  display: block;
  position: absolute;
  top: 1em;         /* posizioni rispetto al 

 */
  left: 4em;
  width: 20em;    /* misure da definire */
  height: 5em;
  border: 3px solid black;   /* se ti piace (ma nelle prove lascialo) */
  background: yellow;
}

Nota che questa e` una soluzione molto grezza, ma dovrebbe funzionare (tranne in IE6).
Potrebbe essere necessario usare anche z-index, a seconda dell'ordine degli elementi nel HTML

Per i dettagli e il funzionamento in IE6, vedi i menu (come spiegato sopra)

[markzzz]

guarderò meglio il codice! grazie in caso rialzo il post