How to get popovers in LWC to go across LEX page sections

My question is how do I get my custom popover to span across LEX page sections like this standard popover? I’m using SLDS styling.

LWC html:

<template>
    <div class="slds-page-header">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-opportunity">
                            <lightning-icon icon-name="standard:contact" size="small"></lightning-icon>
                        </span>
                    </div>
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h4>
                                    <span>Contact</span>
                                    <div class="parent" onmouseover={openPopover} onmouseleave={closePopOver}>
                                        <a class="slds-page-header__title slds-truncate" title="Name" onclick={handleOpenContact} >Hello World</a>
                                        <template if:true={boolShowPopover}>
                                            <section class="slds-popover slds-nubbin_top-left slds-popover_medium testHover" role="dialog" style="position:absolute;"></div>
                                                <header class="slds-popover__header">
                                                    Header           
                                                </header>
                                                <div class="slds-popover__body">
                                                    Body
                                                </div>                                                    
                                            </section>
                                        </template>
                                    </div>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-page-header__col-actions">
                <div class="slds-page-header__controls">
                    <div class="slds-page-header__control">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

JS:

import { LightningElement, api, track, wire } from 'lwc';

export default class PopoverExample {

    boolShowPopover;

    togglePopover() {
        this.boolShowPopover = !this.boolShowPopover;
    }
    openPopover() {
        this.boolShowPopover = true;
    }

    closePopOver() {
        this.boolShowPopover = false;
    }


}

Thank you all!

section.slds-popover { z-index: 9000 }