To achieve specified design, you may need to make two blocks overlap. In Drupal, blocks are the spaces that hold the content we have put into them. This gives us the freedom to place them and then style them wherever on the page we need to achieve design. If the blocks are only for visual purposes, then this would be fine; however, if one of the blocks has a button or other hover/clickable functions, then this might be an issue, especially if that block is covered by the other. The solution? No matter how many blocks you have stacked up, there is a way to organize the order of which the blocks stack together.

Code: CSS

Using the style

We will be styling our block in the corresponding style sheet, using the correct selectors that the block has or has been given by you. By using the style below, we will learn how to determine the order of our stacked blocks.

          “Selector” {

           z-index: x;

           }

You can specify the order of which the selected block is displayed.  If you have 10 blocks, the block with (z-index: 0;) will appear under the block with the top block. For instance,

          z-index: 1;

and so on, making

          z-index: 10;

Tip: If you feel you will need to add more blocks to the stack, try spacing the original blocks by 10. For example,

          z-index: 0;

          z-index: 10;

          z-index: 20;

          etc..  

If you think you need to add blocks in between the second and third blocks, you can use the following changes to do so:

          z-index: 11;  

to

         z -index: 19;

This should add a block in between the second and third blocks.