Context⌗

You landed here means that you were also facing issue with overlapping elements in your html. In my case it looked like this.

Overlapping Elements

TLDR;

Set the z-index of the parent element(in our case grid item containing) to 2 and z-index of the grid item containing other elements that cover the datepopper to 1.

Deep Dive⌗

Now for the people interested in why this happens, let’s dive in. To understand this we first need to understand what is ‘stacking context’ and how it works.

Stacking Context⌗

You can read in details about stacking context here.

From the above link:

Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

This statement is going to be important for us.

Let’s look at the example they have provided.

Understand Z-Index

The hierarchy of stacking contexts is organized as follows:

Root
    DIV #1
    DIV #2
    DIV #3
        DIV #4
        DIV #5
        DIV #6

In the example, DIV #1 has a z-index of 5 and DIV #3 has a z-index of 4. This means that any content inside DIV #3, even if it has a z-index higher than the z-index of DIV #1 will be hidden behind DIV #1. If we refer to the previous statement, it seems obvious. The stacking context of DIV #4, #5 and #6 is DIV #3. So, after the contents of DIV #4, #5 and #6 are stacked, the whole DIV #3 is considered in the stacking order of DIV #1. Hence, the behavior we see in the example.