CSS：框的位置是：絕對沒有頂/左抵消了

考慮以下幾點：CSS：框的位置是：絕對沒有頂/左抵消了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      .box-2 { position: absolute } 

      /* Styling */ 
      .box-1 { background-color: #ccc; width: 3em } 
      .box-2 { background-color: #ddd; width: 3em } 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td> 
        <div class="box-1">1</div> 
       </td> 
       <td> 
        <div class="box-2">2</div> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

這被渲染爲：

Box 2 lower than box 1 http://img.skitch.com/20100512-cr58jx4p5k37n4fcm6cn8h6dde.png

爲什麼箱2不能在同一級別比方框1？它有一個position: absolute，沒有top或left，所以我希望它能從正常流程中取出而不影響其位置。（請注意，我不是試圖通過更改CSS來解決「問題」，而是要理解瀏覽器爲什麼以這種方式呈現此框。）

來源

2010-05-12 avernet

這是因爲td有一個本地vertical-align:middle。因爲.box-2不再佔用任何空間，所以頂部設置在單元的中間。如果將的valign或vertical-align設置爲top，它將按照您的預期工作。

來源

2010-05-12 19:54:54 tau

真棒;現在它是有道理的。 – avernet 2010-05-12 21:20:35

我很高興它幫助你！ – tau 2010-05-12 23:11:54

CSS：框的位置是：絕對沒有頂/左抵消了

回答

相關問題