Elements inside div with z-index:-1 does not show up even though z-index is more than -1

Question

As a developer trainee, my company ask me to do a Gantt Chart in purely HTML and CSS, below first picture can be used for reference:

Those grey coloured boxes contains Milestones and description boxes.Those grey boxes does not placed in the same container the timetable used

Since this Gantt Chart is a timetable, so I use table to put those timetable contents

The blue coloured circle is and text next to it are timetable contents

Here's the issue, the timetable with the black border outside it (#chart_box) contains z-index:-1, but contents from those <td> with class cb_contents_tb does not shows up on these grey boxes, even though I used z-index:5

Here's the full code

#header {
    background-color:lightblue;
    width:25%;
    margin-top:3%;
    height:10%;
    line-height: 10%;
    position: absolute;
}

#chart_box {
    border: solid;
    z-index:-1;
    margin-left:20%;
    margin-top:5%;
    height:85%;
    width: 75%;
    position: absolute;
}

#tr_header {
    border:solid;
}

th {
    background-color:lightgray;
    border-left-color:white;
    padding:15px;
    padding-left:60px;
    padding-right:60px;
}

td.empty_row {
    border-left-style:dotted;
    border-left-color:lightgray;
    height:20px;
    padding:15px;
    padding-left:60px;
    padding-right:60px;
}

td.empty_row_last {
    border-left-style:dotted;
    border-right-style:solid;
    border-left-color:lightgray;
    border-right-color:lightgray;
    height:20px;
    padding:15px;
    padding-left:60px;
    padding-right:60px;
}

td.empty_row_first {
    border-left-style:solid;
    border-left-color:lightgray;
    height:20px;
    padding:15px;
    padding-left:60px;
    padding-right:60px;
}


td.cb_contents_tb {
    display:table-cell;
    z-index:5;
    position: absolute;
    padding-left:60px;
    padding-right:60px;
    height:80px;
}

td.spanned {
    text-align:center;
}

.cb_contents {
    display:inline-block;
    z-index:1;
}

.content_box {
    border-style:solid;
    border-color:rgb(216, 214, 214);
    overflow:visible;
    background-color:rgb(216, 214, 214);
    width:100%;
    height:80px;
    margin-bottom:20px;
    z-index:1;
}

.content_box_title {
    display:inline-block;
    padding:10px;
}

.blue-circle {
    width:10px;
    height:10px;
    display:inline-block;
    border-style:solid;
    border-color:white;
    background-color:aqua;
    border-radius: 100%;
}

<!DOCTYPE HTML>
<html>
    <head>
        <title>Gantt Chart (Week)</title>

        <!-- stylesheet -->
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>

    <body style="margin-left:0px;">
            <div id="header">
                <h2 style="text-align:center;line-height:1;">Gantt Chart (Week)</h2>
            </div>


        
        <div style="position:absolute;z-index:1;margin:14% 1%;width:87%;margin-left:6%;">
            <!-- Planning Task -->
            <div class="content_box">
                <h4 class="content_box_title">Planning Task</h4>
            </div>

            <!-- Introduction Task -->
            <div class="content_box">
                <h4 class="content_box_title">Introduction Task</h4>
            </div>

            <!-- Team Selection -->
            <div class="content_box">
                <h4 class="content_box_title">Team Selection</h4>
            </div>

            <!-- Execution Task -->
            <div class="content_box">
                <h4 class="content_box_title">Execution Task</h4>
            </div>


            
        </div>

        <!-- Chart Tables -->
        <div id="chart_box">

            <table style="margin:5% 9%;z-index:2;">
                <tr id="tr_header">
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>

                <!-- Empty Row -->
                <tr>
                    <td class="empty_row_first"></td>
                    <td class="empty_row"></td>
                    <td class="empty_row"></td>
                    <td class="empty_row"></td>
                    <td class="empty_row"></td>
                    <td class="empty_row_last"></td>
                </tr>
    
                <tr>
                    <td class="cb_contents_tb" colspan="2">
                        <div class="blue-circle" style="z-index:5;position:absolute;"></div>
                        <span style="z-index:5;position:absolute;">Milestone 1 (Data)</span>
                    </td>
                </tr>
    
            </table>
    

        </div>
    </body>
</html>

What I'm trying to achieve is, make contents to display in front of grey boxes (.content_box)

don't put separate codes, try to create a complete one that we can run and test — Temani Afif, Apr 07 '20 at 08:32
Hey @TemaniAfif I have edited and added a code snippet to the original post — Y4glory, Apr 07 '20 at 08:40
remove z-index:-1; from chart box and increase the z-index of header — Temani Afif, Apr 07 '20 at 08:44

score 0 · Answer 1 · answered Apr 07 '20 at 08:39

You should consider that every element containing other elements can function as a reference for z-indexing. See example below. So make sure the structure of your code makes it posible.

Since your #chart_box has z-index:-1 , the table will be below the content_box titles. Solution: move the table outside the #chart_box and position the table absolutely.

#one{
position:relative;
z-index:1;

  width:60px;
  height:60px;
  background-color:#00c;
}

#four{
 position:absolute;
 z-index:4;
  left:20px;
  width:40px;
  height:40px;
  background-color:#fc0;
 }
 
 #two{
  position:relative;
  z-index:2;
  top:-20px;
  width:40px;
  height:40px;
  background-color:#c00;
 }

<div id="one">
1
  <div id="four">4</div>
 </div>
 
 <div id="two">
 2
 </div>

Elements inside div with z-index:-1 does not show up even though z-index is more than -1

1 Answers1