Z-index using Smart Payment Options

  • Resolved justinl895

    (@justinl895)


    6 years, 1 month ago

    I have a theme that has a header bar that follows the page down as the user scrolls.

    When I enable Smart Payments and the Gold and Blue (Paypal & Payapl Credit) are enabled the z-index is set to 100 which overlaps with my main header bar.

    When Z-index is disabled the icons works properly and do not overlap onto the main header bar.

    #xcomponent-paypal-button-1fe29f2e97 > .xcomponent-outlet > iframe.xcomponent-component-frame {
    z-index: 100;
}

    I don’t know if i can do an !IMPORTANT to set z-index:0 or is the z-index in the iframe?

    Are there any other options than setting my z-index of the header wrapper to be greater than 100, I found 101 and above will work properly, but it i think the proper way to fix this is to change the z-index of the paypal plugin not my themes main header.

    Thanks in advanced!

Viewing 2 replies - 1 through 2 (of 2 total)

  • There’s no reason you can’t use z-index greater than 100. This property accepts all integers (well, technically it’s all integers from negative 2,147,483,647 up to positive 2,147,483,647 ). If z-index of 101 solves your problem, go for it. I sometimes use 1000 for sticky headers to give me plenty of room for everything underneath.

    Thread Starter justinl895

    (@justinl895)

    Thanks Iscmark,

    Seems like an easy fix when you put it that way! I’ll make the header a higher z-index.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Z-index using Smart Payment Options’ is closed to new replies.

Tags