In the position positioning attribute of css: the difference between absolute and fixed-CSS Tutorial-php.cn

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

怪我咯

Release： 2017-06-22 10:11:53

Original

3376 people have browsed it

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>

Copy after login

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!