position absolute与fixed 区别
分类：实例代码
position absolute与fixed 区别属于前端实例代码，有关更多实例代码大家可以查看。
本章节通过代码实例介绍一下两种定位方式的区别。
position:absolute是绝对定位，其实position:fixed也是绝对定位的一种扩展或者说变型。
两者都脱离了文档流，但是又有很大的不同点。
position:fixed定位的元素会固定原来的位置不变，无论如何拖动滚动条。
代码实例:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div{
width:50px;
height:50px;
background:red;
}
#left{
left:0px;
top:100px;
position:absolute;
}
#right{
right:0px;
top:100px;
position:fixed;
}
</style>
</head>
<body style="height:1000px;">
<div id="left"></div>
<div id="right"></div>
</body>
</html>
代码演示了两种定位的不同特征，同时它们定位参考对象的不同:
（1）.fixed定位，如果父级元素中没有使用transform变换，那么参考对象就是视口，否则以采用transform变换的父辈元素。
（2）.absolute定位方式：如果父级元素具有采用定位的父级元素，那么就以该父级元素为参考，否则就以以initial containing block为参考，具体可以参阅绝对定位一章节。
position absolute与fixed 区别，这样的场景在实际项目中还是用的比较多的，关于position absolute与fixed 区别就介绍到这了。