Hai la possibilità di rendere elementi appaiono ovunque ti piace nella pagina Web. L'attributo CSS "posizione" rende possibile. Assegnando un valore "assoluto" per una casella a discesa, per esempio, è possibile riposizionare l'oggetto come il codice viene eseguito nel browser. Questa capacità è utile quando si desidera visualizzare un effetto speciale insolito o se è sufficiente la vostra discesa a comparire in una posizione specifica nella pagina.

istruzione

1 Lanciate il vostro editor HTML o Blocco note e incollare il codice riportato di seguito nella sezione corpo del documento:

<Div id = "dropdown1">

<Select>

<Option value = "red"> rosso </ option>

<Option value = "blue"> Blu </ option>

</ Select>

</ Div>

<Input type = valore "pulsante" = "Sposta Drop Down" onclick = "moveDropdown ( 'dropdown1', '100', '200')">

Questo codice crea una casella e un pulsante in basso. Il pulsante chiama la funzione JavaScript che sposta la casella a discesa. Si noti che l'evento click del pulsante passa valore ID dell'elemento div alla funzione.

2 Aggiungere la seguente funzione JavaScript per sezione head del documento:

Funzione moveDropdown (id, XPOSITION, yPosition) {

var dropdownObj = document.getElementById (id);

dropdownObj.style.position = "assoluto";

dropdownObj.style.top = yPosition + "px";

dropdownObj.style.left = XPOSITION; + "px";

}

Questa funzione recupera un riferimento alla casella a discesa, e cambia la sua proprietà posizione di "assoluto". Questo consente il codice per spostare l'oggetto.

3 Salvare il documento e visualizzarlo in qualsiasi browser. L'elenco a discesa appare sulla pagina Web. Fare clic sul pulsante "Sposta Drop Down" per spostare l'elenco alle coordinate specificati nel codice.

Consigli e avvertenze

• Fare attenzione quando si sposta la discesa troppo lontano. HTML consente di posizionare gli oggetti fuori dallo schermo. Se le coordinate dello schermo sono troppo grandi, il browser può posizionare la casella a discesa in un luogo in cui i visitatori del sito non si vede.