css固定定位于绝对定位的区别
我们在进行网页的内容排布时，新手估计会为绝对定位和固定定位的差别有所混淆，下面就来解释下他们之间的区别吧。
操作方法
- 01
绝对定位中当一个DIV块的位置被定义为绝对定位的时候，也就失去了文档流即失去原本的位置，并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找，直到找到body为止)来进行偏移, 固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移。
- 02
我们可以用代码来验证代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #gd{ width:500px; height:500px; background:red; position:fixed; } #jd{ width:300px; height:300px; background:blue; position:absolute; left:400px; top:1000px; } </style> </head> <body> <div id="jd"> 我是绝对定位 </div> <div id="gd"> 我是固定定位 </div> </body> </html>
- 03
以上代码的效果如下
- 04
下拉滚动条可以看出固定定位始终保持在左上角并且固定定位显示的优先级高于觉都定位
- 05
总结:固定定位于绝对定位最根本的区别还是偏移基准的不同固定定位是相对于屏幕而绝对定位的基准则是父级元素，而且最好还要注意ie6不兼容固定定位而兼容绝对定位