Question

I have the following CSS code, and my problem is that my
nav bar comes on top of my header block. How can I move
the nav bar straight down from the header?

header {                                                                                
    background: black;                                                                  
    height: 60px;                                                                       
    left: 0;                                                                            
    margin: 0;                                                                          
    padding: 0;                                                                         
    position: absolute;                                                                 
    width: 100%;                                                                        
}                                                                                       

header img {                                                                            
    float: left;                                                                        
    margin-right: 10px;                                                                 
    position: relative;                                                                 
}                                                                                       

header h1 {                                                                             
    color: white;                                                                       
    font: 26px Helvetica, Arial, sans-serif;                                            
    line-height: 60px;                                                                  
    margin: 0;                                                                          
    vertical-align: middle;                                                             
}                                                                                       

nav {                                                                                   
    background: black;                                                                  
    margin: 0;                                                                          
    padding: 0;                                                                         
    position: absolute;                                                                 
    width: 100%;                                                                        
}

Answer 1

@H.A; you give position absolute to your header block & nav block . So, when you give position absolute to an element then the element remove for the normal flow

CSS:

nav { 
 top:60px;
 padding: 0;
 position: absolute;
 width: 100%;
}

Read this article for more http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/