Come evitare la sovrapposizione DIV Tag

February 4

Come evitare la sovrapposizione DIV Tag


fogli di stile a cascata (CSS) norme consentono un Web designer per controllare il posizionamento dei suoi elementi del sito web. A volte, queste regole provocano frustrazione come regole di posizionamento contrastanti causano elementi del sito web a sovrapporsi. Fortunatamente, le impostazioni CSS consentono al progettista di stabilire comportamenti predefiniti per gli elementi. Quando elementi come una sovrapposizione div, il progettista può risolvere queste impostazioni fino a quando non raggiunge il risultato desiderato.

istruzione

1 Assegnare un ambiente troppo pieno. La proprietà overflow CSS governa il modo in cui un div gestisce il contenuto assegnato al div. I cinque possibili impostazioni per la regola di overflow sono visibili, nascoste, scorrere, auto e ereditano. Il valore predefinito della proprietà di overflow è visibile. Questa impostazione visibile non ritaglia il contenuto in eccesso. Questo significa che il contenuto potrebbe fuoriuscire del div e su un altro div. Questo crea la percezione che i div si sovrappongono. L'impostazione nascosta ritaglierà il contenuto. Le impostazioni di scorrimento e di auto posizionare una barra di scorrimento del div. E, l'impostazione Eredita permette al div di ereditare il suo valore di overflow dalla sua div genitore. Nel seguente regola CSS, la proprietà overflow di un div con l'ID di "yourDiv" è stato impostato per scorrere. Così, contenuti extra non fluisce fuori dal div.

yourDiv

{

overflow: scroll;

}

2 Scrivi un parametro chiaro. A volte, un div CSS galla può intrufolarsi e in uno spazio aperto accanto a un altro div. Questo crea l'aspetto di sovrapposizione sull'altro div. Il parametro chiaro mette in scena una regola spazio attorno ad ogni div. I valori per la regola sono nessuno, sinistra, destra, entrambi e ereditano. Il valore predefinito della proprietà chiaro è impostata a nessuno. Ciò significa che non ci sono regole di liquidazione in tutto il primo div e div galla potrebbe insidiarsi oltre esso. Le impostazioni sinistro e destro posizionare una regola passaggio sui rispettivi lati del div. I luoghi di impostazione sia una regola gioco su entrambi i lati della div. La regola ereditano permette il div di ereditare la chiara proprietà del suo div genitore. Nel seguente esempio, l'impostazione chiara per il div "yourDiv" è stato impostato su entrambi. Ciò significa che un div flottato non può strisciare su entrambi i lati del primo div.

yourDiv

{

clear: both;

}

3 Includere un distanziatore div. A volte, il contenuto di un div flottato espanderà la lunghezza di un div flottato finché non è più in lunghezza rispetto al suo div sorella posizionato relativamente. Quando questo accade, il div galleggiava può espandersi fuori dal contenente div genitore e in successive zii div. Per risolvere questo problema, è sufficiente includere un distanziatore div vuoto dopo che i due fratelli div. Il distanziale div deve contenere una regola chiara con un valore di entrambi. La regola chiara impedisce che il div galleggiare da espansione in entrambi i lati del distanziatore div. Il distanziatore div funge da confine attraverso il quale il div galleggiava non può passare. Ecco un esempio di un distanziatore div:

<Div class = stile "distanziatore" = "clear: both;"> </ div>