【前端css】position定位
- 互联网
- 2025-09-12 12:57:01
一、定位分类 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文档流位置。
【前端css】position定位由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【前端css】position定位”
