In my setup, there is a table with an inline edit popup in the tbody section that is absolutely positioned.
Within the table footer, there is a display of inline-block that holds buttons floated to the left and right, as shown below:
<div class="table-footer">
<div class="new-row-button">
<lightning-button variant="base" label="New Row" title="Add new row" icon-name="utility:add" onclick={addNewRow}></lightning-button>
</div>
<template if:true={changesWereMade}>
<div class="save-cancel-wrapper">
<lightning-button variant="brand" label="Ok" title="Make changes" onclick={handleSave}></lightning-button>
<lightning-button label="Cancel" title="Discard changes" onclick={revertChanges} class="slds-m-left_xx-small"></lightning-button>
</div>
</template>
</div>
Despite having a z-index of 9001, I still come across the issue illustrated in this https://i.sstatic.net/GbkJO.png.
My attempts at adjusting the z-index of the tbody, table, and inline editor have not proven successful in positioning it over these buttons. The only workaround I found was setting the table-footer to relatively positioned and assigning a z-index of -1. However, this caused the buttons to become unclickable as they were now 'below' the page.
Any suggestions on using CSS to place these buttons under the inline editor? (The table element and table-footer div are on the same level in the hierarchy)