posizione: relativa causa l'ancoraggio di punti di ancoraggio

Question

Stavo trafficando con un sito Web che sto sviluppando, tentando di correggere alcuni bug di IE7, poiché si tratta di un progetto interno e IE7 è il browser standard. Ho finito per aggiungere "position: relative" per correggere un paio di problemi di layout specifici di IE, ma mi sembra di aver peggiorato le cose in FF/Chrome (mi considero più un programmatore di sistemi, ma le mie attuali responsabilità coinvolgono più di un web fuoco sfortunatamente).

Il problema specifico è che gli elementi "posizione: relativo" hanno finito per rendere alcuni dei miei collegamenti, che erano flottanti a destra, non modificabili. Ho creato una semplice pagina di test che spero spiegherà meglio di me con le parole: http://jsfiddle.net/gBchZ/.

Alla fine riuscirò a risolvere questo problema, ma speravo che qualcuno potesse spiegare il motivo alla base del fatto che i miei collegamenti si nascondevano dietro la posizione: elementi relativi.

Answer 1

Senza avere il link del sito è difficile dire esattamente cosa c'è che non va. Ma in ogni caso, una soluzione potrebbe essere quella di utilizzare z-index per il genitore di a. Ad esempio z-index:100. Ricorda che z-index funziona solo con elementi posizionati, quindi puoi utilizzare position:relative.

Demo, sulla base di esempio:http://jsfiddle.net/gBchZ/3/

Answer 2

Questo perché lo .contentdiv s copre la casella destra (nella demo). Se si aggiunge un margin-right a quei div il a diventa 'raggiungibile:'

.content 
{ 
    position: relative; 
    margin-right: 20%; 
} 

JS Fiddle demo

Si potrebbe anche usare position: absolute; per rendere l'elemento a apparire 'superiore' nella z-index, anche se questo diventa piuttosto complessa :

#rightBox 
{ 
    background-color: green; 
    width: 25px; 
    height: 25px; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    margin: -20px .5em .5em .5em; 
    padding: .5em; 
} 

JS Fiddle demo

Answer 3

@David 's corretta in quanto il position: relative sulle .content articoli sta dando loro un z-index, che significa che sono ‘in primo piano’ del collegamento che si' Ve fluttuò a destra.

Credo che una soluzione migliore è però aggiungere position: relative; al link che hai galleggiate destra così, e dargli un z-index superiore a .content:

#rightBox 
{ 
    ... 
    position: relative; 
    z-index: 2; 
} 

.content 
{ 
    position: relative; 
    z-index: 1; 
} 

Vedi http://jsfiddle.net/gBchZ/6/