Come posizionare un DIV su un oggetto

July 12

Come posizionare un DIV su un oggetto


Internet è diventato il mezzo di scelta per la pubblicazione di idee e opinioni, la commercializzazione di prodotti e pubblicizzare se stessi o la vostra azienda. Tuttavia, la creazione di un sito web da solo non è sufficiente per essere visto. Per ottenere il traffico web, un sito web deve stare fuori dai milioni di pagine concorrenti. Utilizzando metodi come divisioni per organizzare e posizionare gli oggetti e le informazioni in luoghi specifici della pagina si dà uno sguardo pulito e ben progettato che vi distinguono dalla folla.

istruzione

1 Aggiungere un tag DIV al documento web utilizzando "<div>" tag per iniziare la divisione e "</ div>" alla fine di esso. Tutto il codice o il testo tra l'inizio e tag finali saranno contenute nel DIV. Le divisioni possono essere impostati per una posizione specifica, in modo da poter mettere il codice in qualsiasi punto del documento.

2 Creare un attributo di stile per il vostro DIV con l'aggiunta di "style =" al tag DIV inizio dopo la parola div ma prima della parentesi finale. attributi di stile HTML può impostare una posizione, le dimensioni e di più per la vostra divisione.

3 Impostare la posizione di essere assoluta con l'aggiunta di "position: absolute;" per l'attributo di stile. Utilizza coordinate X e Y in pixel di mettere alla divisione sopra il vostro oggetto con la tag "sinistra" "top" e. Ad esempio, se si desidera che la DIV sia 50 pixel dalla parte superiore e 50 pixel da sinistra, tipo "top: 50px; sinistra: 50px;" dopo il codice di posizione.

4 Aggiungere una "z-index" attributo dopo il codice in alto a sinistra e digitando "z-index: 10;" per garantire la vostra divisione appare sulla parte superiore dell'oggetto e non sotto. Un più alto "z-index" apparirà sulla parte superiore di oggetti con un più basso "z-index".

5 Aggiungere virgolette appena prima di "posizione" e subito dopo il punto e virgola della z-index.

Consigli e avvertenze

  • Se l'oggetto appare ancora in cima alla DIV, creare un nuovo DIV per l'oggetto con un z-index inferiore.
  • Il codice completo basato sul tutorial di cui sopra dovrebbe essere simile a questo:
  • <Div style = "position: absolute; top: 50px; sinistra: 50px; z-index: 10;"> contenuto DIV </ div>