The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Box Shadow is getting covered up

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #292001

    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:

    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;


    Set position: relative on .SE-compare-table-pr.

    Z-index doesn’t work without setting the position style to relative, absolute or fixed.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.