So that your spacing between the top of the page remains the same. For example group 1 is set in editor to Y value of 120px with a header element of height 60px Y value set to 0. There will be a space of 60px between the bottom of your header and the top of the group 1.
When you then hide the group 1 and want group 2 to be shown and maintain that 60px space between the bottom of the header element and the top of group 2, this is why they need to be vertically aligned. If you don’t want to maintain the same spacing, don’t vertically align.
No, I mean overlapping. So if a group 1 has a height of 200px with Y value set to 0 and group 2 has a Y value of 100px there is an overlap.