How can I get the lightning-button-menu to display above other components

Question

I'm creating custom table, row, and cell LWC components. The lightning-menu-item options display under other components no matter what I try. I've been adjusting the display and position values of all the components, and I haven't found a combination that works. It seems to be possible because the out of the box lightning-datatable row action menu will display over other components.

Does anyone now how to get the row action's button menu to display over other components?

testTables.html

<template>
    <table
        class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_col-bordered slds-m-bottom_x-small"
        role="treegrid"
    >
        <thead>
            <tr class="slds-line-height_reset">
                <template for:each={table1FieldList} for:item="field">
                    <th
                        aria-label={field.label}
                        aria-sort="none"
                        class="slds-has-button-menu slds-is-sortable"
                        key={field.property}
                        scope="col"
                    >
                        <a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="-1">
                            <span class="slds-assistive-text">Sort by: </span>
                            <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                <span class="slds-truncate" title={field.label}>{field.label}</span>
                            </div>
                        </a>
                    </th>
                </template>
                <th scope="col" style="width: 3.25rem">
                    <div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template if:true={table1Data} for:each={table1Data} for:item="row">
                <c-test-row key={row.field1} field-list={table1FieldList} row-data={row}></c-test-row>
            </template>
        </tbody>
    </table>

    <table
        class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree slds-table_col-bordered"
        role="treegrid"
        aria-label="Child Relationships"
    >
        <thead>
            <tr class="slds-line-height_reset">
                <template for:each={table2FieldList} for:item="field">
                    <th
                        aria-label={field.label}
                        aria-sort="none"
                        class="slds-has-button-menu slds-is-sortable"
                        key={field.property}
                        scope="col"
                    >
                        <a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="-1">
                            <span class="slds-assistive-text">Sort by: </span>
                            <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                <span class="slds-truncate" title={field.label}>{field.label}</span>
                            </div>
                        </a>
                    </th>
                </template>
                <th scope="col" style="width: 3.25rem">
                    <div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template if:true={table2Data} for:each={table2Data} for:item="row">
                <c-test-row key={row.field1} field-list={table2FieldList} row-data={row}></c-test-row>
            </template>
        </tbody>
    </table>
</template>

testTables.css

:host {
    position: relative;
}

testTables.js

import { LightningElement, track } from "lwc";

export default class TestTables extends LightningElement {
    @track table1Data = [{ field1: "value1a", field2: "value2a", field3: "value3a" }];
    @track table2Data = [
        { field1: "value1a", field2: "value2a", field3: "value3a", field4: "value4a" },
        { field1: "value1b", field2: "value2b", field3: "value3b", field4: "value4b" },
        { field1: "value1c", field2: "value2c", field3: "value3c", field4: "value4c" }
    ];
    @track table1FieldList = [
        { label: "field1", property: "field1" },
        { label: "field2", property: "field2" },
        { label: "field3", property: "field3" }
    ];
    @track table2FieldList = [
        { label: "field1", property: "field1" },
        { label: "field2", property: "field2" },
        { label: "field3", property: "field3" },
        { label: "field4", property: "field4" }
    ];
}

testRow.html

<template>
    <template if:true={fieldList}>
        <tr>
            <template iterator:it={fieldList}>
                <td key={it.value.property}>
                    <span class="slds-grid slds-grid_align-spread">
                        <div class="slds-truncate">
                            <c-test-cell row-data={rowData} field={it.value}></c-test-cell>
                        </div>
                    </span>
                </td>
            </template>

            <td role="gridcell" style="width: 3.25rem" aria-readonly="true" tabindex="0">
                <span class="slds-grid slds-align_absolute-center slds-grid_align-spread">
                    <div>
                        <span>
                            <lightning-button-menu menu-alignment="auto" icon-size="x-small" variant="border-filled">
                                <lightning-menu-item value="1" label="1"></lightning-menu-item>
                                <lightning-menu-item value="2" label="2"></lightning-menu-item>
                                <lightning-menu-item value="3" label="3"></lightning-menu-item>
                                <lightning-menu-item value="4" label="4"></lightning-menu-item>
                                <lightning-menu-item value="5" label="5"></lightning-menu-item>
                            </lightning-button-menu>
                        </span>
                    </div>
                </span>
            </td>
        </tr>
    </template>
</template>

testRow.css

:host {
    display: contents;
}

testRow.js

import { LightningElement, api } from "lwc";

export default class TestRow extends LightningElement {
    @api rowData;
    @api fieldList;
}

testCell.html

<template>
    <lightning-formatted-text value={fieldValue}></lightning-formatted-text>
</template>

testCell.js

import { LightningElement, api } from "lwc";

export default class TestCell extends LightningElement {
    @api rowData;
    @api field;

    get fieldValue() {
        return this.rowData[this.field.property];
    }
}

Answer 1

Remove slds-table_fixed-layout from the table tag:

<table class="....  ̶s̶l̶d̶s̶-̶t̶a̶b̶l̶e̶_̶f̶i̶x̶e̶d̶-̶l̶a̶y̶o̶u̶t̶">

---

Add a custom class to the table:

<table class=".... fixed-layout">

Provide fixed table layout to the table through custom CSS:

.fixed-layout {
  table-layout: fixed;
}