- 绝对定位中当一个DIV块的位置被定义为绝对定位的时候，也就失去了文档流即失去原本的位置，并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找，直到找到body为止)来进行偏移,
固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移。
-
我们可以用代码来验证代码如下:
<!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>
-
以上代码的效果如下
-
下拉滚动条可以看出固定定位始终保持在左上角并且固定定位显示的优先级高于觉都定位
- 总结:固定定位于绝对定位最根本的区别还是偏移基准的不同固定定位是相对于屏幕而绝对定位的基准则是父级元素，而且最好还要注意ie6不兼容固定定位而兼容绝对定位。
步骤阅读原文地址：https://www.cnblogs.com/weikeqi/p/9311717.html
时间： 2024-08-05 09:15:50