温州小学网站建设开发网站需要什么硬件
一、定位分类
1、static 静态定位 属于正常文档流
如果选择的是这个定位，那么css中的left、right、bottom、top不会发生作用。
2、relative 相对定位，相对原来的位置，别的元素不会挤占其原本空间
left、right、bottom、top也是相对文档流的位置。
3、absolute 绝对定位，别的元素会挤占其原本空间，是相对于他的包含他的元素而言的，就是父级元素而言
相对父元素中有定位的元素进行定位偏移，一直向上寻找到根元素。
4、fixed 固定定位，是相对于浏览器而言
相对于浏览器定位
5、sticky 是relative和fixed的合成体，指的是到一定位置时固定在某位置。
他是针对浏览器边框的，正常情况下在文档流位置，当要滚动出浏览器之后，被限制在定位位置。
二、举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 50px;height: 300px;border: 1px solid black;margin-top: 20px;}.one{position: static;left: 100px;}.two{position: relative;left: 10px;}.three{position: absolute;left: 100px;}.four{position: sticky;top:10px;left:200px;}.five{position: fixed;left: 100px;top:0px;}</style>
</head>
<body><div class="one">1</div><div class="two">2</div><div class="three">3</div><div class="four">4</div><div class="five">5</div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>
在这个案例中4是粘性定位sticky，所以在向上滚动的时候不会出屏幕，3是absolute脱离了文档流，所以以前的4到3文档流位置。
