Css position:fixed code breaks divs positions

[fantamedo]

I have a simple HTML page and it contains two \[code\]div\[/code\]s aligned vertically. The page is scrollable because of second \[code\]div\[/code\]. I want the first \[code\]div\[/code\]'s position to be fixed, or nonscrollable, so that only the second \[code\]div\[/code\] is scrollable. I added \[code\]position:fixed\[/code\] to first \[code\]div\[/code\]'s css but this time, the second \[code\]div\[/code\] was placed on first \[code\]div\[/code\], so the first \[code\]div\[/code\] disappears under the second \[code\]div\[/code\].CSS \[code\]body { width:1000px; height:100%; margin:0 auto;/*body ortalama*/}#div1 { height:300px; background-color:#00CC66;}#div2 { display:block; word-wrap:break-word; padding:30px; font-size:72px; background-color:#FF3;}\[/code\]HTML\[code\]<div> <div id="div1"></div> <div id="div2"> <p> <!--Content Here--> </p> </div></div>\[/code\]