Question

作为一名开发培训生，我的公司要求我使用纯HTML和CSS制作甘特图，下面的第一张图片可以用作参考：

灰色框包含里程碑和说明框。这些灰色框未与使用的时间表放在同一容器中

由于此甘特图是一个时间表，所以我使用表格来放置这些时间表的内容

蓝色圆圈是，其旁边的文本是时间表的内容

这是问题所在，时间表外面有黑色边框（#chart_box）包含z-index:-1，但是<td>中类别为cb_contents_tb的那些内容并未显示在这些灰色框，即使我使用了z-index:5

这是完整的代码

#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>

我想要实现的是，使内容显示在灰色框（.content_box）前面

Answer 1

您应该考虑到每个包含其他元素的元素都可以用作z-indexing的参考。请参见下面的示例。因此，请确保代码的结构使其可行。

由于您的#chart_box具有z-index：-1，因此该表将位于content_box标题下方。 解决方案：将桌子移到#chart_box外面，然后将其放在绝对位置。

#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>

即使z-index大于-1，div内具有z-index：-1的元素也不会显示

1 个答案: