relative相对定位不会脱离文档流
分类:实例代码
相对定位是不会脱离文档流的,也就是说它后面的元素不会填补元素原来的位置。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #a{ width:100px; height:100px; background:#ccc; position:relative; left:300px; top:200px; } #b{ width:100px; height:100px; background:red; } </style> </head> <body> <div id="a"></div> <div id="b"></div> </body> </html>
红色的div元素并没有填补灰色div元素原来所占据的位置,所以相对定位并没有脱离文档流。
关于什么是文档流可以参阅什么是文档流一章节。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu