.pageHeaderPanel {
    position: fixed;
}

.userPanel {
    position: absolute !important;
    z-index: 100 !important;
}

.pageHeaderSearch {
    z-index: 200 !important;
}

<div id="pageHeaderContainer" class="pageHeaderContainer">
    <header id="pageHeader" class="pageHeader">
        <div id="pageHeaderPanel" class="pageHeaderPanel">
            <div class="layoutBoundary">
                {include file='pageHeaderMenu'}
            </div>
        </div>
        
        <div id="pageHeaderFacade" class="pageHeaderFacade">
            <div class="layoutBoundary">
                {include file='pageHeaderLogo'}
                {include file='pageHeaderUser'}
                {include file='pageHeaderSearch'}
            </div>
        </div>
        
        <script data-relocate="true">
            require(['WoltLabSuite/Core/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
                UiPageHeaderFixed.init();
            });
        </script>
    </header>
    
    {hascontent}
        <div class="boxesHero">
            <div class="layoutBoundary">
                <div class="boxContainer">
                    {content}
                        {foreach from=$__wcf->getBoxHandler()->getBoxes('hero') item=box}
                            {@$box->render()}
                        {/foreach}
                    {/content}
                </div>
            </div>
        </div>
    {/hascontent}
</div>