Home > Article > Web Front-end > In the position positioning attribute of css: the difference between absolute and fixed

In the position positioning attribute of css: the difference between absolute and fixed

怪我咯Original: 2017-06-22 10:11:533335browse

We know that in csspositionpositioningproperty, there are two that represent absolute positioning Value, value absolute and value fixed.

are both absolute positioning. They are both consistent and different. So what is the difference between the two? That is, the element positioned by the fixed value of position will be fixed in its original position. No matter how you drag the scroll bar, the element will not Will change the position , which can also be seen from the meaning of the English word fixed, "fixed, unchanging, stubborn ". Absolute is just the opposite. When dragging the scroll bar, the element will change position along with .

Here is an example:

<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>测试absolute与fixed</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  background:green;
}
#left{
  left:0px;
  top:100px;
  position:absolute;
}
#right{
  right:0px;
  top:100px;
  position:fixed;
}
</style>
</head>
<body style="height:1000px;">
<div id="left">absolute</div>
<div id="right">fixed</div>
</body>
</html>

The original page is like this:

In the position positioning attribute of css: the difference between absolute and fixed

When the scroll bar is dragged down, the effect It goes like this:

In the position positioning attribute of css: the difference between absolute and fixed

The changes are obvious.

The above is the detailed content of In the position positioning attribute of css: the difference between absolute and fixed. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css position attribute: the difference and usage of absolute, relative, static, and fixedNext article：css position attribute: the difference and usage of absolute, relative, static, and fixed

See more

In the position positioning attribute of css: the difference between absolute and fixed

Related articles