Using Z-index In order to place objects or boxes (divs) on top of each other, first of all position properties must be set to absolute or fixed. Then their exact position should be set using the required left - right - top - bottom properties. When the boxes are stacked on top of each other, by default the most recent will appear at the top. This can be changed with the z-index property. Each of the objects placed on top of each other is given a number with the z-index property and the z-index value of the element that is desired to appear on top is made the highest. For example, styles were created for 3 different boxes at the bottom, these boxes were made to overlap, and which one would appear at the top and which one at the bottom was set. Box3 will appear at the top and box2 will appear at the bottom. #box1 { position:absolute; z-index:2; top:50px; left:100px; } #box2 { position:absolute; z-index:1; top:50px; left:100px; } #box3 { position:absolute; z-index:3; top:50px; left:100px; } what is z-index, what does css box z index do, stack divs boxes, change div order, determine which one appears on top EXERCISES Placing Boxes Top on Top Try It With the z-index value, it can be determined which box will be higher. You can make changes on the codes and see the result by clicking the try it button.