Multiple fullscreen sections with absolute positioned divs inside

I'm creating a website and I want each section to take up the full screen. I have:

 html, body {
height: 100%;
width: 100%;
margin: 0;
}

and each section has 100% height and width and relative position. Inside the second section, I want to create four divs that take up each corner. They share a class which has height and width 50% and absolute position. I tried to position them individually by selecting each id and giving them top:0 left:0, top:0 right: 0, and so on.

The problem is, the left and right positioning works, but when I try to position the top or bottom, the div will go to the top or bottom of the first section instead of the second. I think it might be an issue with having two 100% divs on top of each other, but I'm not sure. Would really appreciate any advice!

via Chebli Mohamed