I switched the div floats on 1 and 2 to get them in the same position as the comp. Then I added a third div with the class of div3, and moved its position into the html flow where it should go. I set the position to relative with a float right. This way the position of other divs are unaffected and div3 only needs to be given some breathing room with a margin-left of 10px. I also set the margin-top for all divs to be -8px to eliminate the white space at the top, and added -8 to the right of div3 and left of div1.
First I added div3 to the html with a class of div3. Then I removed the floats from div1 and div2 so all of the divs were stacked in their normal block flow. Then I set the position of all all divs under the main div element to relative. This prevents from having to do it for each class, and also allows each one to be adjusted from its original position without adjusting any other elements. Div1 is fine to remain in its normal position. Div2 had the left and right margins set to auto in order to center it. Div3 was able to float right to push it to the far right side. After that I added a negative margin for div1 and div3 to fill in any white space on the page.
I first removed the general div styling and applied it to div2 since they are different in this example. Then I increased the width and height and color of div1. Both div1 and div2 were set to inline-block display in order to let them
To make the format match, I first changed the background color of div 2 to gray. Then I made div1 float left to maintain its position in the top left corner. From here I set the position of div 2 to fixed in order to reserve its space and make adjustments around it. I'm also floating div 2 left in order to put its starting position to the same as div 1. Then with those overlapping I can adjust the margins around div 2 in order to give it the layered/overlapping effect in the example.