The location of the two divs above each other

In .d2 there is a color , instead of background-color , so it is not visible, and it seems that .d1 has blocked it.

On the presented code only this is visible.

Each diva has the position:fixed; property position:fixed; that is, the blocks will be positioned relative to the browser window + left:0; top:0; properties left:0; top:0; left:0; top:0; shift blocks one point. In order to put them under each other, it is necessary for one of the blocks to make an indent above the height of the other:

 .d2 { position: fixed; left: 0; top: 100px; width: 100px; height: 100px; color: yellow; z-index: 2; } 

As mJeevas noticed tweak the background-color property

No, that's right, the second overlaps the first. You just confused the color and background-color , so the second is transparent.

 .d1 { position: fixed; left: 0; top: 0; width: 100px; height: 100px; background-color: black; z-index: 1; } .d2 { position: fixed; left: 0; top: 0; width: 100px; height: 100px; background-color: yellow; /*color: yellow;*/ z-index: 2; } 

 <div class="d1"></div> <div class="d2"></div> 

Remove both position: fixed blocks. Wrap them in a div and ask him position: fixed