position定位总结

常见的position定位方式如下:

1.static 默认值。

（即没有定位）遵循正常的文档流对象。

2.fixed

生成绝对定位的元素，通常相对于浏览器窗口或 iframe 进行定位。

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

这就如一些页面上的侧边导航条一样，不管你的页面如何滚动，导航条的位置始终未有任何改变。

3.relative

生成相对定位的元素，相对定位元素的定位是相对其原本位置。其原本的位置不会被其他元素所占用，而absolute则不同，其原本的位置会空出来，如果后边还有元素，那他就会占用该空间

注：相对定位元素经常被用来作为绝对定位元素的容器块。但是其他定位也可以作为绝对定位元素容器，static不行，因为他的意思是元素没有定位，这个为默认值。

例子1：相对定位，其原本的位置不被占用

<!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>
        /* 去掉默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        .stage{
            position: relative;
        }
        .box{
            width: 300px;
            height: 150px;
            font-size: 30px;
            color: whitesmoke;
            font-weight: bolder;
            margin-bottom: 10px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            position: relative;
            left: 100px;
            background-color:blueviolet;
        }
        .box3{
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="stage">
        <div class="box box1">1</div>
        <div class="box box2">我是相对定位的</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

例子2：绝对定位，其原本的位置会被占用

<!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>
        /* 去掉默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        .stage{
            position: relative;
        }
        .box{
            width: 300px;
            height: 150px;
            font-size: 30px;
            color: whitesmoke;
            font-weight: bolder;
            margin-bottom: 10px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            position: absolute;
            left: 100px;
            background-color:blueviolet;
        }
        .box3{
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="stage">
        <div class="box box1">1</div>
        <div class="box box2">我是绝对定位的</div>
        <div class="box box3">3</div>
    </div>
    <script>
      
    </script>
</body>
</html>

4.absolute

生成绝对定位的元素， 相对于最近一级的不是 static（static是没有定义的）的父元素来进行定位,如果没有找到的话，最终是根据body进行定位。

注：定位使元素的位置与文档流无关，因此不占据空间。

常见的position定位方式如下:

1.static 默认值。

2.fixed

3.relative

4.absolute

猜你喜欢