CSS problem.

I am trying to have a horizontel section just on the very top of my page that extends the entire horizontel length of the page. I want that section or my “links” section to be a different background color than the “body1” section. I also would like for the “body1” section to scroll separately from the “links” section and therefore have the links section stay fixed on top of the page.

How do I do this? My code below is not working correctly:

#links {
position: absolute;
background-color:#ffcc99;

background-repeat: repeat-x;}

#body1 {
position: absolute;
top: 100px;
background-color:#cc9900;}

#area1 {
position: absolute;
top: 200px;}

#area2 {
position: absolute;
top: 400px;}

#area3 {
position: absolute;
top: 600px;}

#area4 {
position: absolute;
top: 800px;}

I tried fixed positioning for the links section only but that did not work. The body1 section is always overlapping the links section and scrolling over it while the links section just sits there. Also I can not get the links section to extend horizontely across the page with the background color. I am using div’s. Please help and explain simply since I am new at this. Thanks.

Also in #CSS _↴