How can I change the position of the subscription popup widget (top, bottom or center)?

Positioning the subscription popup is a supported configuration option — you do not need CSS overrides.

Recommended: use the position option

Set it in the subscribePopup section of the Web SDK init parameters. Allowed values are 'top' (the default), 'bottom' and 'center':

var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
  applicationCode: 'YOUR_APP_CODE',
  apiToken: 'YOUR_DEVICE_API_TOKEN',
  subscribePopup: {
    enable: true,
    position: 'top'
  }
}]);

Internally the widget applies the class pw-position-top, pw-position-bottom or pw-position-center to its container, so switching the option moves the popup correctly without breaking the buttons or the show/hide transition.

If you need custom CSS on top of that

The popup container has the id pwSubscribePopup and the class pw-subscribe-popup. Because the built-in pw-position-* classes set top/bottom (including the off-screen state used for the slide-in animation), always clear the property you are not using before setting your own — otherwise the two rules fight each other:

#pwSubscribePopup {
  bottom: unset;
  top: 0;
}

Prefer the position option where possible: hand-written rules can conflict with the animation classes and with future SDK styling changes.