2017-11-18 95 views
-1

不知道如何標題的話,所以它就這樣了。如何重疊不同的DIV ID的

My attempt

,我想這樣的標題是我的頁面的藍色部分移動表,但表的身體仍然是灰色。我試過margin-bottom:-50px;,正如預期的那樣是上述結果。以下是我迄今爲止的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> 
+2

您是否也可以提供HTML? – Klooven

+0

你需要添加相對於表和z-index的位置 –

+0

@klooven - 完成:) – Matt1966

回答

1

您需要更改

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

,並給

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

按照您的表頭向上偏移的最高值