Bring to Front for Bottom Separator's not working properly

[andeng1106]

Describe the bug Bottom separator overlaps for columns contents even if Bring to Front is toggled OFF Top separator works fine for editor but for some blocks, it doesn't work in frontend.

Happens on blocks with separators such as:

• Call to Action - top and bottom (top doesn't work on frontend only)
• Columns/Container - bottom only
• Feature - top and bottom (top doesn't work on frontend only)
• Feature Grid - bottom only
• Hero - top and bottom (top doesn't work on frontend only)

To Reproduce Steps to reproduce the behavior:

1. add a columns/container block or any block listed in description above
2. add contents inside the column
3. make sure container background is toggled on and has a visible background color
4. In Block indicator, toggle Bottom Separator
5. Add separator color
6. Set Height to max (400)
7. Check if it overlaps
8. Check if Bring to Front is toggled on

Additional steps to see to add Separator Layer 2:

1. If it works fine, add another separator by toggling Separator Layer 2 on
2. Add separator color
3. Set opacity to 1
4. Check if it overlaps
5. Check if Bring to Front is toggled on

Expected behavior Bottom Separator should not overlap contents inside the column if Bring to Front is toggled OFF

Screenshots

https://user-images.githubusercontent.com/103395655/165459637-bbd3e2ff-327f-4453-87a6-545570187830.mp4

Sample from client's websites:

• Visit https://www.coursebuildershub.com/ - Overlapping happens here

• Visit https://www.earlyyears.tv/ - Overlapping doesn't happen here and it seems to work fine