In lesson 2 of this module we discussed how to position our form submit button using position:absolute. In this bonus lesson I wanted to take some extra time to discuss an alternative solution, using CSS Grid, and why I think it is a superior solution.

Why I dislike position absolute

Before diving into the CSS Grid solution, I first want explain why I dislike the position:absolute solution.

When using position:absolute we are essentially removing the element from the normal document flow. This means that the element is taken out of the normal layout process, and any surrounding elements will not be aware of its existence. Meaning they shift their positioning to fill the gap, or the parent shrinks in size.

Take a look at the super ugly example below. The red border indicates the outline of the parent element. As soon as you give the button position:absolute, the parent will shrink in size, because the button suddenly takes up no space in the parent anymore.

If we want to make sure the button stays in it’s place, and the input does not resize, we need to give the button right: 0;, plus we need to give padding on the right side of the parent, equal to the width of the button.

Try changing the settings below to see the behavior in action.