关于编写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适应的情况有不同的用法,对于基础可以查阅相关资料。