When arranging CSS block elements on a web page, the blocks will sometimes overlap whether it is intentional or not. When viewing the resulting page, these overlapping blocks may not be noticeable because the actual contents of the blocks do not overlap. In such a scenario, the designer may decide not to do anything further since the contents of these overlapping blocks display as desired.

However, one scenario where block prioritization is useful is when there are links inside of these blocks. In some cases, a link can become hidden underneath another block when the block is layered on top of the link. The result is that the link no longer works even though the text itself looks fine. The link just behaves like regular text, e.g. it isn't clickable. Sometimes, a portion of the linked text works, because the overlapping block covers only a portion of the linked text.

You can solve this problem by using the z-index property. The z-index property sets the stacking order of an element, allowing you to specify which block should be on top and which should be layered below. For example, let's say you have three boxes, A, B and C, with linked text in box A. Boxes B and C happen to be layered on top of A, resulting in an unclickable link in Box A. You can use z-index to ensure that box A is the top layer:

#boxA {
  float: left;
  position: relative;
  z-index: 20;
}

#boxB {
  position: relative;
  z-index: 10;
}

#boxC {
  position: relative;
}

Based on the above z-index values, box A will be the top layer, followed by box B, and then box C. The box with the highest z-index value becomes the top layer, with subsequent layers determined by the next highest z-index values. You can also have a negative z-index value although some older browsers may have trouble with it.

The z-index property only works on positioned elements, i.e. elements that have been positioned with position: absolute or position: relative. When the z-index value is not specified, subsequent blocks are layered on top of previous blocks.