Ошибка для моего div div таблицы div

Question

<div id="apDiv"><table width="100%" class="flat-table flat-table-1"> 
         <tbody> 
          <tr> 
           <th style="width:10px"><font color="#003300">NAME</font></th> 
           <th style="width:200px"><font color="#003300">LICENSE#</font></th> 
    <th style="width:200px"><font color="#003300">PLATE#</font></th> 
           <th style="width:5px"><font color="#003300">OFFENSES</font></th> 
           <th style="width:150px"><font color="#003300">OFFICER</font></th> 
           <th style="width:150px"><font color="#003300">RANK</font></th> 
    <th style="width:200px"><font color="#003300">VIOLATION</font></th> 
           <th style="width:200px"><font color="#003300">CONFISCATED</font></th> 
           <th style="width:200px"><font color="#003300">V.PLACE</font></th> 
           <th style="width:500px"><font color="#0000CC">LAST UPDATE</font></th> 
          </tr> 
         </tbody> 


     <?php 
     date_default_timezone_set('Asia/Manila'); 
         $conn=mysql_connect("localhost","root",""); 
         mysql_select_db("dbposo",$conn); 


      $violationz=mysql_query("select *,date_format(ttime,'%h:%i %p') as timed from tblviolator ORDER BY ddate DESC") or die(mysql_error()); 

         while($data=mysql_fetch_array($violationz)) 
          { 
           $license=$data['license']; 
           $link=str_replace(" ","-",$license); 
           $fname=$data['fname']; 
           $mname=$data['mname']; 
           $lname=$data['lname']; 
           $plateno=$data['plateno']; 
           $offenses=$data['offenses']; 
           $type=$data['type']; 
           $officer=$data['officer']; 
           $violation=$data['violation']; 
           $confiscated=$data['confiscated']; 
           $violationplace=$data['violationplace']; 
           $ddate=$data['ddate']; 
           $ttime=$data['ttime']; 


           print " 
            <tr license='X$license'> 
            <td width='10px'><center><font size='1'>$lname,$fname,$mname</center></td> 
            <td width='200px'><center><a href='edit_publicviolation.php?n=$link'><font color='#00FF00'>$license</font></a></center></td> 
            <td width='90px'><center>$plateno</center></td> 
            <td width='50px'><center>$offenses</center></td> 
            <td width='530px'><center>$officer</center></td> 
            <td width='280px'><center>$type</center></td> 
            <td width='280px'><center>$violation</center></td> 
            <td width='280px'><center>$confiscated</center></td> 
            <td width='280px'><center>$violationplace</center></td> 
            <td width='200px'><center>$ddate $ttime</center></td></tr> 
            "; 
          } 

            ?> 
    </table> 

this is my CSS 

<style type="text/css"> 
#apDiv { 
    position:absolute; 
    width:1313px; 
    height:233px; 
    z-index:2; 
    left: 35px; 
    top: 299px; 
} 
.flat-table { 

     margin-bottom: 20px; 
     border-collapse:collapse; 
     font-family: 'Lato', Calibri, Arial, sans-serif; 
     border: none; 
       border-radius: 3px; 
       -webkit-border-radius: 3px; 
       -moz-border-radius: 3px; 
    } 
    .flat-table th, .flat-table td { 
     box-shadow: inset 0 -1px rgba(0,0,0,0.25), 
      inset 0 1px rgba(0,0,0,0.25); 
    } 
    .flat-table th { 

     font-weight: normal; 
     -webkit-font-smoothing: antialiased; 
     padding: 1em; 
     color: rgba(0,0,0,0.45); 
     text-shadow: 0 0 1px rgba(0,0,0,0.1); 
     font-size: 1.5em; 
    } 
    .flat-table td { 
     color: #f7f7f7; 
     padding: 0.7em 1em 0.7em 1.15em; 
     text-shadow: 0 0 1px rgba(255,255,255,0.1); 
     font-size: 1.2em; 
    } 
    .flat-table tr { 
     -webkit-transition: background 0.3s, box-shadow 0.3s; 
     -moz-transition: background 0.3s, box-shadow 0.3s; 
     transition: background 0.3s, box-shadow 0.3s; 
    } 
    .flat-table-1 { 
     background: green; 
    } 
    .flat-table-1 tr:hover { 
     background: rgba(0,0,0,0.19); 
    } 
    .flat-table-2 tr:hover { 
     background: rgba(0,0,0,0.1); 
    } 
    .flat-table-2 { 
     background: #f06060; 
    } 
    .flat-table-3 { 
     background: #52be7f; 
    } 
    .flat-table-3 tr:hover { 
     background: rgba(0,0,0,0.1); 
    } 

</style> 

Как я могу сделать div, вставленный в мой css?

потому что он блокирует экран, но оригинал все еще там, ничего не происходит.

всякая вставка записи блокирует экран, как я могу исправить его с помощью css?

помогите пожалуйста.

вот ссылка изображения http://waaaaaas.weebly.com/

Answer 1

#apDiv { 
    position:absolute; 
    width:1313px; 
    height:233px; 
    z-index:2; 
    left: 35px; 
    top: 299px; 
} 

Ваш div (который содержит таблицу) является «плавающим» над страницей (перекрывая нижний колонтитул), потому что вы сказали это. Это то, что установочная позиция: абсолютная - она ​​берет рассматриваемый элемент из нормального потока страницы и позиционирует ее независимо. Большая часть CSS в разделе выше не нужна, если вы не хотите, чтобы это было сделано. Вместо этого попробуйте просто:

#apDiv { 
    width:1313px; 
    height:233px; 
} 

Смотрите, если это делает то, что вы хотите - он не должен перекрывать нижний колонтитулы больше в этой точке. Вам почти наверняка придется поиграть с этим немного больше, но позиция: абсолютная определенно не то, что вы хотите.

Answer 2

Вы должны закрыть DIV где-то, в противном случае ваш браузер интерпретирует всю часть ниже как часть дел.