Html 如何重叠不同的DIV ID';s

Html 如何重叠不同的DIV ID';s,html,css,twitter-bootstrap-4,Html,Css,Twitter Bootstrap 4,我不知道怎么称呼这个标题,所以就这样吧 我想移动表格,使标题位于页面的蓝色部分,但表格的主体仍位于灰色部分。我尝试了marginbottom:-50px和预期的上述结果。下面是我的attemot的css和html代码 我该怎么做 蓝色部分: #section2 { background-color: #2aa3ef; /**blue**/ padding-top:80px; padding-bottom:80px; } 灰色部分: #section1 { ba

我不知道怎么称呼这个标题,所以就这样吧

我想移动表格,使标题位于页面的蓝色部分,但表格的主体仍位于灰色部分。我尝试了
marginbottom:-50px和预期的上述结果。下面是我的attemot的css和html代码

我该怎么做

蓝色部分:

#section2 {
    background-color: #2aa3ef; /**blue**/
    padding-top:80px;
    padding-bottom:80px;
}
灰色部分:

#section1 {
    background-color: #e6ecf0;
    padding-top:20px; padding-bottom:20px; /**bluey white**/
}

        <div class="col-md-4 col-sm-12">        
    <table class="points_table">
        <thead>
            <tr>
                <th><h4>Premium domains</h4></th>
            </tr>
        </thead>

        <tbody class="points_table_scrollbar">
            <tr class="odd">
                <td class="col-xs-7">Bidder.co.uk</td>
                <td class="col-xs-3">24hr</td>
                <td class="col-xs-3">£200</td>
                <td class="col-xs-12"><a class="btn btn-warning" href="#">button</a></td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">2</td>
                <td class="col-xs-7">Test Points 2</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">3</td>
                <td class="col-xs-7">Test Points 3</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">4</td>
                <td class="col-xs-7">Test Points 4</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">5</td>
                <td class="col-xs-7">Test Points 5</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">6</td>
                <td class="col-xs-7">Test Points 6</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">7</td>
                <td class="col-xs-7">Test Points 7</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">8</td>
                <td class="col-xs-7">Test Points 8</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">9</td>
                <td class="col-xs-7">Test Points 9</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">10</td>
                <td class="col-xs-7">Test Points 10</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">11</td>
                <td class="col-xs-7">Test Points 11</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">12</td>
                <td class="col-xs-7">Test Points 12</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">13</td>
                <td class="col-xs-7">Test Points 13</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">14</td>
                <td class="col-xs-7">Test Points 14</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">15</td>
                <td class="col-xs-7">Test Points 15</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">16</td>
                <td class="col-xs-7">Test Points 16</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">17</td>
                <td class="col-xs-7">Test Points 17</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">18</td>
                <td class="col-xs-7">Test Points 18</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="odd">
                <td class="col-xs-1">19</td>
                <td class="col-xs-7">Test Points 19</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>

            <tr class="even">
                <td class="col-xs-1">20</td>
                <td class="col-xs-7">Test Points 20</td>
                <td class="col-xs-1">10</td>
                <td class="col-xs-1">0</td>
                <td class="col-xs-1">5</td>
                <td class="col-xs-1">1</td>
            </tr>
        </tbody>
    </table>
#第1节{
背景色:#e6ecf0;
填充顶部:20px;填充底部:20px;/**蓝白**/
}
高级域名
Bidder.co.uk
24小时
£200
2.
测试点2
10
0
5.
1.
3.
测试点3
10
0
5.
1.
4.
测试点4
10
0
5.
1.
5.
测试点5
10
0
5.
1.
6.
测试点6
10
0
5.
1.
7.
测试点7
10
0
5.
1.
8.
测试点8
10
0
5.
1.
9
测试点9
10
0
5.
1.
10
测试点10
10
0
5.
1.
11
测试点11
10
0
5.
1.
12
测试点12
10
0
5.
1.
13
测试点13
10
0
5.
1.
14
测试点14
10
0
5.
1.
15
测试点15
10
0
5.
1.
16
测试点16
10
0
5.
1.
17
测试点17
10
0
5.
1.
18
测试点18
10
0
5.
1.
19
测试点19
10
0
5.
1.
20
测试点20
10
0
5.
1.
您需要更改

#section1 {
    background-color: #e6ecf0;
    padding-top:0px; padding-bottom:20px; /**bluey white**/
    position:relative;
}
给予

.points_table{
  top:-50px;
position:absolute;
}

顶部值根据您的表头转到上方

您是否也可以给出您的HTML。您需要添加相对于表和z的位置-index@klooven-完成:)@AndréDion,那是一个打字错误-对于px它不起作用