0

I have set the #option's z-index higher than the #option:before's, but the Option 2,3,4,5's before is still being shown over the Option 1,2,3,4. How to fix this issue?

index.html

body {
    margin: 0;
}
#options_container {
    background-color: rgb(129, 129, 129);
    height: 60px;
    width: 100%;
    text-align: center;
    overflow: auto;
    white-space: nowrap;
    z-index: 1;
}
#option {
    height: 40px;
    width: 75px;
    line-height: 40px;
    font-size: 15px;
    color: white;
    text-align: center;
    background: rgb(22, 22, 23);
    position: relative;
    display: inline-block;
    transition: all .25s linear;
    user-select: none;
    overflow: initial;
    z-index: 2;
}
#option:before {
    height: 100%;
    top: 5.5px;
    left: -10px;
    background: red;
    transform: skewY(-45deg);
}
#option:after {
    height: 75px;
    bottom: -42.5px;
    left: 28.3px;
    background: blue;
    transform: rotate(90deg) skew(0, 45deg);
}
#option:before, #option:after {
    width: 10px;
    content: '';
    position: absolute;
    transition: all .25s linear;
    z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="options_container">
        <div id="option">Option 1</div>
        <div id="option">Option 2</div>
        <div id="option">Option 3</div>
        <div id="option">Option 4</div>
        <div id="option">Option 5</div>
    </div>
</body>
</html>
aman
  • 801
  • 15
  • 34
  • Possible duplicate of: [Order of Pseudo Elements](https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e) – Remote Jan 18 '19 at 23:38
  • FYI: ID's are meant to be unique - you should only have one element per ID on a page. Consider using a class in place of an ID, or updating to `#option1`, `#option2`, etc. –  Jan 18 '19 at 23:40
  • I removed the `z-index` of `#option` and set the `z-index` of `#options_container` to `-2` and `#option:before` to `-1` But it still doesn’t work – aman Jan 18 '19 at 23:51
  • ID are not only meant to be unique, they **must be unique**. This is not an optional requirement. – connexo Jan 19 '19 at 00:01
  • @mark.hch connexo. Both of you have solved 99% of my problem, but u can stop now and let someone else do the 1%.Thanks – aman Jan 19 '19 at 01:51

0 Answers0