If both blocks are absolute, which one will be displayed on top of the other and why?

If two blocks have position: absolute, then the display order is determined by the z-index property. The block with the higher z-index will be displayed on top.

If z-index is not set or is equal, then the order is determined by the DOM order: the element that appears later will be on top.

Example:

.block1 {
  position: absolute;
  z-index: 1;
}
.block2 {
  position: absolute;
  z-index: 2; /* this block will be on top */
}

If z-index is the same, then the last in the HTML will be on top.