Hello,
I have a comparison table that I’ve built and I’m having an annoying CSS issue. I have three columns and the middle column is highlighted with a different color as well as a box shadow that created a dark shading around the whole box. The box shadow is showing up on the top and bottom but it’s getting covered up by the other two boxes on each side. I set the z-index to 1000 but it doesn’t seem to change anything. Here is my codepen project: https://codepen.io/knfoster/pen/bPgKOg
Here’s the CSS in question:
.SE-compare-table-pr {
display: inline-table;
width: 100%;
border: 1px solid white;
background-image: linear-gradient(#253b7b, #357bbf);
padding-bottom: 40px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
margin-left: -2px;
margin-right: -2px;
z-index: 1000;
text-align: left;
}
