Come evitare che l'elemento posizionato fisso si sovrapponga ad altri elementi in css?

Question

Dire che ho tre div:

<div id="outer"></div> 
<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 
</div> 

#one { 
position:fixed; 
top:0px; 
left:0px; 
} 

#two { 
width: 80%; 
height:500px; 
} 

#three { 
width: 80%; 
height:500px; 
} 

div "due" e "tre" sembrano essere sormontato da div "uno" a causa della posizione fissa.

1) Qual è il modo migliore per renderlo tale da non sovrapporsi?

2) Qual è il modo migliore per fare in modo che il mio div fisso occupi il 100% dell'altezza, anche se l'utente scorre verso il basso? (come una barra laterale, impedendo qualsiasi nuovo div che voglio correre sullo stesso lato dei div due e tre) Il modo migliore coinvolge i float per #two e #three?

Answer 1

1:

Aggiungendo margin-left si può fare in modo che a lungo div fisso non si sovrappone agli altri.

#two, #three { 
    margin-left:20%; 
    width:80%; 
    height:500px; 
} 

2:

Aggiunta del bottom:0px; rende l'altezza della finestra perché espande dall'alto verso il basso.

#one {  
    position:fixed; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    width:20%; 
} 

Nota: Ho anche aggiunto una larghezza flessibile del 20% al #one div in modo che gioca bene con gli altri due div larghezza flessibile.

Fiddle:http://jsfiddle.net/ZPRLd/

Answer 2

Cambiando la posizione da position: fixed; a position: sticky; risolto il mio problema.

#one{ 
position: sticky;  
}