How to overlap different DIV ID's

Question

Wasn't sure how to word the title so here it goes.

I'm wanting to move the tables so the headings are on the blue part of my page, but the body of the table is still on the grey. I tried just margin-bottom:-50px; and as expected was the above result. Below in the css and html code of my attemot so far!

How do I this?

Blue section:

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

Grey section:

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

Could you give your HTML also. – Klooven Nov 18 '17 at 13:08 — Klooven, Nov 18 '17 at 13:08
you need to add position relative to table and z-index – Temani Afif Nov 18 '17 at 13:11 — Temani Afif, Nov 18 '17 at 13:11
@AndréDion, that was a typo - with px it doesn't work – Matt1966 Nov 18 '17 at 13:18 — Matt1966, Nov 18 '17 at 13:18

score 0 · Answer 1 · answered Nov 18 '17 at 13:23

You need to change

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

and give to

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

top value as per your table head gone upper side

How to overlap different DIV ID's

1 Answers1