CSS關於相對定位和絕對定位的說明實例_CSS/HTML

.a, .b, .c, .d, .e
{
   width: 100px;
   height: 100px;
   margin: 5 auto？ ;
   background: #000;
}
.aa, .bb, .cc, .dd, .ee
{
   top: 10px;
{
   top: 10px;
{
   top: 10px;
 >   width: 10px;
   height: 10px;
   overflow: hidden;
   background: #F90;
}
   background: #F90;
}
   background: #F90;

}

.b, .drel); }
.cc, .dd, .ee
{position: absolute;}

  

   A:皆不設定postion，一般巢狀關係

  

   B:僅外div設定relative，一般巢狀關係

  

   C:僅內div設定absolute，文件中為嵌套關係，頁面中內div浮起[非float]，相對於頁面定位，與外div無關。

   background: #F90;

}
   background: #F90;
}
   background: #F90;

}

.b, .drel); }
.cc, .dd, .ee
{position: absolute;}

  

   A:皆不設定postion，一般巢狀關係

  

   B:僅外div設定relative，一般巢狀關係

  

   C:僅內div設定absolute，文件中為嵌套關係，頁面中內div浮起[非float]，相對於頁面定位，與外div無關。

  

   D:外div設定relative，內div設定absolute，內div浮起來並相對於外div定位

  

   D:外div設定relative，內div設定relative，內div浮起來並相對於外div定位

  

   E:這個是說明邊界問題。 -10 != 反向10px間距