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 区别就介绍到这了。

回复

我来回复
  • 暂无回复内容