How do I go about making my popup element appear over the publications page, similar to how google scholar’s cite button popup works?

I was working on a publications page and wanted to have the bibtex be a popup, kind of like how google scholar’s cite button works (NOT their bibtex button which links to a new page).

The issue is that I can’t get the popup to overlay on top of the page. I’ve tried moving the popup out of the block, or out of the div element, even into a new file and then importing to Publications.js, but none of it works.

It is true that this moves around the popup (either above/below the p section or the entire main section) but it doesn’t make it get on top of everything else like the google scholars version does. I think perhaps this is due to how my container is defined? Also, I already tried things like adjusting the top, bottom, etc., and changing the z value.

Here is my code below, for the publications main section js and cs files, publications.js, popup.js and popup.css.

Google Scholars Popup

My popup

PublicationsMain.js

import React, {useState} from 'react';
import Popup from './pages/Popup';
import './PublicationsMain.css';

function PublicationsMain() {
  const [firstButtonPopup, setFirstButtonPopup]=useState(false);
  return (

<> <div className='publications-main-container'>
      <p className="firstp">random text[
            <button onClick={()=>setFirstButtonPopup(true)}>bibtex</button>] 
              <Popup trigger={firstButtonPopup} setTrigger={setFirstButtonPopup}>
              <h3>bibtex</h3>
              <p>Here is my bibtex</p>
              </Popup>
              </p>
    </div>
    </>
  );
}

export default PublicationsMain;

PublicationsMain.css

 :root {
    --font-size: 31px;
}

.publications-main-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    object-fit: contain;
}


.publications-main-container > p {
    color: #fff;
    font-size: var(--font-size);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 
    'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight:bold;
    padding:3rem;
}

.publications-main-container > p.firstp {
    background-color: #2c3e50;
}

.publications-main-container > p.secondp {
    background-color: #2e557f;
}

.publications-main-container > p.thirdp {
    background-color: #2c3e50;
}

.publications-main-container > p.fourthp {
    background-color: #2e557f;
}

.publications-main-container > p > span {
    color: #fff;
    font-style: italic;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 
    'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.publications-main-container > p > a {
    color: #fff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 
    'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.publications-main-container > p > button {
    background: none!important;
    border: none;
    padding: 0!important;
    font-size: var(--font-size);
    font-weight: bold;
    color: #fff;
    text-decoration: underline;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 
    'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    cursor: pointer;
}

Popup {
    position: fixed;
    bottom:0;
    top:0;
    left:0;
    right:0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000000000;
}



@media screen and (max-width: 1093px) {
    /* .publications-main-container > h1 {
        font-size: 80px;
    } */
}
@media screen and (max-width: 978px) {
    /* .publications-main-container > h1 {
        font-size: 60px;
    } */
    :root {
        --font-size: 27px;
    }
}

@media screen and (max-width: 784px) {
    /* .publications-main-container > h1 {
        font-size: 55px;
    } */

    :root {
        --font-size: 23px;
    }
}

@media screen and (max-width: 701px) {
    /* .publications-main-container > h1 {
        font-size: 47px;
    } */
}

Publications.js

import PublicationsHero from '../PublicationsHero';
import PublicationsMain from '../PublicationsMain';

function Publications() {
  return (
    <>
      <PublicationsHero />
      <PublicationsMain />
    </>
  );
}

export default Publications;

Popup.js

import React from 'react'
import './Popup.css';

function Popup(props) {
  return (props.trigger) ? (
    <div className="Popup">
        <div className="popup-inner">
            <button className="close-btn" onClick={()=>props.setTrigger(false)}>&#x2715; 
            &#x00d7; </button>
            {props.children}
        </div>
    </div>
  ) : "";
}

export default Popup;

Popup.css

.popup {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-inner{
    position:relative;
    padding:32px;
    width:100%;
    max-width: 640px;
    background-color: #fff;
}

.popup-inner .close-btn {
    position: absolute;
    top:16px;
    right:16px;
}