Posizionamento di elementi nella visualizzazione Progettazione

Articolo
09/12/2008

Aggiornamento: novembre 2007

Quando si creano pagine HTML o pagine Web ASP.NET nella finestra di progettazione HTML, gli elementi vengono fisicamente disposti dall'alto verso il basso. Per impostazione predefinita, quando viene eseguito il rendering della pagina nel browser, il rendering degli elementi viene eseguito in base allo stesso ordine, dall'alto verso il basso, secondo quello che viene talvolta definito come layout di flusso.

È anche possibile posizionare gli elementi in modo bidimensionale, utilizzando coordinate orizzontali e verticali in qualsiasi punto della pagina. Questa opzione di layout usufruisce delle opzioni di posizionamento disponibili tramite gli stili.

In visualizzazione Progettazione è possibile trascinare gli elementi per posizionarli sulla pagina, nonché selezionarli e applicare opzioni di posizionamento. Nella visualizzazione Progettazione, la pagina visualizza gli elementi nel punto in cui vengono posizionati. Per cambiare la posizione di un elemento è possibile trascinarlo utilizzando il relativo handle di tabulazione. In visualizzazione Origine è possibile impostare le opzioni di posizionamento nel markup per i singoli elementi.

Quando viene eseguito il rendering della pagina, gli elementi verranno visualizzati nel browser in base alle informazioni di posizionamento specificate.

Layout di flusso

Se gli elementi non dispongono di proprietà di stile di posizionamento, si spostano dall'alto verso il basso all'interno della pagina, nonché da sinistra verso destra o da destra verso sinistra, a seconda dell'impostazione dell'attributo dir della pagina o dell'elemento contenitore dell'elemento oppure in base all'impostazione della lingua specificata nel browser. I documenti HTML con questo layout possono essere visualizzati in qualsiasi browser Web. In seguito a un ridimensionamento della pagina è possibile che gli elementi vengano riposizionati.

Se per la pagina si utilizza il layout di flusso, è possibile allineare gli elementi all'interno di un elemento table oppure utilizzare un elemento div con le proprietà di stile di posizionamento o di allineamento testo. Gli elementi non possono tuttavia essere sovrapposti. Se la pagina viene ridimensionata, gli elementi potrebbero spostarsi a seconda che vengano utilizzate unità assolute o percentuali per la larghezza della tabella e delle celle.

Posizionamento bidimensionale

Applicando le opzioni di posizionamento ai singoli elementi, è possibile collocarli in punti precisi della pagina.

È inoltre possibile specificare le opzioni di posizionamento per gli eventuali nuovi elementi aggiunti alla pagina.

Lo strumento di sviluppo Web Microsoft Visual Web Developer consente di specificare le opzioni di posizionamento che corrispondono a quelle definite nella specifica W3C per i fogli di stile CSS (Cascading Style Sheet). Le opzioni di posizionamento sono valide in qualsiasi browser che implementi lo standard W3C HTML 4.0, compresi quelli che supportano XHTML 1.1.

Le opzioni sono le seguenti:

absolute

L'elemento viene sottoposto a rendering in un punto della pagina definito da qualsiasi combinazione delle proprietà di stile left, right, top e bottom. La posizione 0,0 viene definita in base all'elemento padre dell'elemento corrente. L'elemento padre è rappresentato dal primo elemento contenitore con le informazioni sul posizionamento. Se ad esempio l'elemento corrente si trova all'interno di un elemento div con informazioni sul posizionamento, il posizionamento assoluto viene calcolato in base alla posizione dell'elemento div. Se l'elemento corrente non è associato ad alcun elemento contenitore con informazioni sul posizionamento, tali informazioni vengono calcolate in base all'elemento body.

relative

L'elemento viene sottoposto a rendering in un punto della pagina definito dalle proprietà di stile left e top. Questa opzione differisce da absolute in quanto la posizione 0,0 viene definita in base alla posizione dell'elemento nel flusso della pagina. Un elemento posizionato in modo relativo e con entrambe le proprietà di stile top e left impostate su 0 viene visualizzato nel flusso come normale.

Nota:
Gli elementi posizionati in modo assoluto o relativo possono essere visualizzati sulla pagina in un ordine diverso rispetto alla dichiarazione nel markup della pagina, il che potrebbe creare confusione. Ad esempio, in visualizzazione Origine è possibile che un pulsante venga definito come primo elemento nel markup e che, dopo l'impostazione, il pulsante venga visualizzato come ultimo elemento nella pagina sottoposta a rendering o in visualizzazione Progettazione.

Gli elementi posizionati in modo assoluto o relativo possono essere visualizzati sulla pagina in un ordine diverso rispetto alla dichiarazione nel markup della pagina, il che potrebbe creare confusione. Ad esempio, in visualizzazione Origine è possibile che un pulsante venga definito come primo elemento nel markup e che, dopo l'impostazione, il pulsante venga visualizzato come ultimo elemento nella pagina sottoposta a rendering o in visualizzazione Progettazione.

static

L'elemento viene sottoposto a rendering utilizzando il layout di flusso, ossia senza applicare il posizionamento bidimensionale. È possibile selezionare questa opzione se si desidera impostare un'opzione di posizionamento per un singolo controllo che esegue l'override di un'impostazione ereditata da un tema o da un foglio di stile.

In Visual Web Developer è inoltre disponibile l'opzione di posizionamento Not Set, che consente di rimuovere le informazioni sul posizionamento esistenti da un singolo controllo o dai controlli eventualmente aggiunti successivamente.

Posizionamento di testo statico o di gruppi di elementi

Per consentire la creazione di testo statico mobile o di gruppi di elementi come un'unità, è possibile aggiungere un livello alla pagina, ossia un elemento div con informazioni sul posizionamento incluse che è possibile trascinare nella pagina. È quindi possibile digitare testo o trascinare gli elementi nell'elemento div. Il menu Formato di Visual Web Developer comprende un comando per l'aggiunta di un livello. In alternativa è possibile creare l'elemento div e aggiungervi manualmente le informazioni sul posizionamento.

Posizionamento vincolato a una griglia

Se si utilizza il posizionamento assoluto o relativo e sono stati specificati i pixel come base per il posizionamento, ossia le unità per le proprietà left e top sono i pixel, è possibile impostare un'opzione per bloccare gli elementi su una griglia invisibile in modo da poterli allineare sulla pagina. Per informazioni dettagliate, vedere Posizionamento CSS, Finestra di progettazione HTML, finestra di dialogo Opzioni.

Disposizione su livelli degli elementi

Se si utilizza il posizionamento assoluto o relativo, è possibile sovrapporre gli elementi, che verranno sottoposti a rendering nel browser come sovrapposti. Se gli elementi vengono posizionati utilizzando una tabella, non sarà possibile sovrapporli.

Gli elementi posizionati in modo assoluto o relativo possono includere una proprietà z-index che specifica l'ordine, dall'ultimo elemento a quello in primo piano, in base a una terza dimensione. Se due elementi condividono lo stesso spazio, quello con un valore dell'attributo indice z più alto verrà visualizzato in primo piano rispetto all'altro. Se si utilizzano i comandi di posizionamento in visualizzazione Progettazione, la proprietà z-index viene impostata automaticamente, a partire da 100 per l'ultimo elemento. Se si utilizzano le proprietà di posizionamento in visualizzazione Origine, è necessario aggiungere la proprietà z-index manualmente.