How can I move my web subscription prompt to the top of the screen and prevent it from blocking user interaction with my site?

You can control both the position of the web subscription prompt and whether it dims or blocks the page — in most cases through the prompt's own configuration, without any CSS workarounds.

1. Prevent the Prompt from Blocking Page Interaction

The subscribe popup is rendered as an element with the id pwSubscribePopup. Its overlay option controls whether a full-viewport dimming layer is drawn behind the prompt:

• overlay: false (the default) — no dimming layer. In the centered layout the SDK also applies pointer-events: none to the full-screen container, so clicks pass through to your page.
• overlay: true — a semi-transparent layer (rgba(0,0,0,.4)) covers the viewport and intentionally captures clicks until the user subscribes or dismisses the prompt.

So if users cannot click your site because of an "invisible layer", make sure overlay is not enabled, and prefer the top or bottom position over center:

pushwoosh.push(['init', {
  applicationCode: 'XXXXX-XXXXX',
  subscribePopup: {
    enable: true,
    overlay: false,
    position: 'top'
  }
}]);

2. Move the Prompt to the Top of the Screen

Use the prompt's position option — it accepts top (the default), bottom and center, and the SDK applies the matching pw-position-top / pw-position-bottom / pw-position-center class. Changing this option is preferable to overriding CSS.

If you additionally need pixel-precise placement, you can style the element by id. Because the top and bottom layouts are driven by the top/bottom properties, unset the one you are not using:

#pwSubscribePopup {
  bottom: unset;
  top: 20px;
  left: 10px;
  right: 10px;
}

Note: to apply custom placement on mobile only, wrap the rules in a media query:

@media (max-width: 768px) {
  #pwSubscribePopup {
    bottom: unset;
    top: 20px;
  }
}