[FIXED] Why does PayPal Iframe stays above the fixed navbar?

Issue

I've added the PayPal Checkout button from this link here. The problem I encountered is that iframe where PayPal buttons are present stay above my fixed navbar on the page. Why is this happening and how do I put it back at the top?

I've tried to read the documentation but nothing seems to mentions this behavior. I've also tried to change the z-index to my navbar, but that didn't help.

Here is css of my navbar.

.top {
  background-color: black;
  height: 50px;
  width: 100%;
  position: fixed;
  z-index: 5;
  top: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  color: white;
}

<nav class="top"></nav>

Solution

In your CSS, target the iframe element and try adding this code

position: relative;
z-index: 0;

Answered By - Ozgur Sar

Answer Checked By - Cary Denson (PHPFixing Admin)