Pin a button to the bottom of a form using absolute position

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Pin a button to the bottom of a form using absolute position

Absolute-position a submit button so that it’s pinned to the bottom of a form

To do that, first, we need to relatively position the form element. Because, If we absolute-position the submit button first, the button may jump to an unexpected location. So, to keep the button inside the form element, let’s set the form element’s position to relative:

  1. Select the form element
  2. Set its position to relative
 

And now, let’s position the button:

  1. Select the submit button inside the form
  2. Set the position to absolute
  3. Set the bottom, left and right values to 0px
  4. Set the width: 100%

You may notice the submit button might overlap other form elements now that it’s absolute positioned. If this happens, you can fix it by adding bottom padding on the form element to compensate for the submit button’s height.

 

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form