Child pages
  • CSS Positioning

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

You can notice that the "Cancel" button is positioned 20px from Top, Left, Bottom corners; the height is not set, since both Top and Bottom are both set, the button will grow in height. The width is set to calc(50% - 30px), this means will take 50% of the available width minus 30px; we calculated 20px from the left corner (=left postionposition) and 10px from the middle of the screen, so will leave some space between the "Cancel" and the "Confirm" button.

The "Confirm" button similarly set 20px from Top, Right, Bottom; for the "Confirm" button the width is not set, instead the Left position is set to calc(50% + 10px); this is equivalent to leave the Left position not set and set the width to calc(50% -30px) as we did for the "Cancel" button.

...