当前位置：首页 > news >正文

【前端css】position定位

news 2025/8/14 21:50:57

一、定位分类
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>