關於編寫div+css代碼後，出現了不忍直視的“亂動”結果，苦惱了半天，發現原來是定位的問題。
html Demo代碼:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { padding: 0px; margin: 0px; width: 100%; height: 100%; } .box1,.box2 { width: 500px; height: 100px; display: inline-block; float: left; *display: inline; *float: left; } .box1 { background-color: red; position: relative; } .box2 { background-color: yellow; position: absolute; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
實現大家可以自己試一試。
*display: inline; *float: left;
前面加*表示兼容ie6 （可以說是讓ie6認識這個特性的一種語法）對於position與display適應的情況有不同的用法，對於基礎可以查閱相關資料。