聊聊定位之间的小奥秘~

代码和效果图

代码

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局</title>
    <style>
        #app{
            width: 200px;
            height: 200px;
            background-color: #26dc8a;
         }/*id权重更高 */
         .box{
            width: 50px;
            height: 50px;
            background-color: #11110d;
         }
    </style>
</head>
<body>
    <div id="app" class="app">
        <div class="box"></div>
    </div>
</body>
</html>

效果图

现在我们要实现如下效果：

分析：要实现上述效果我们就要用到定位了，首先要给box 容器添加一个绝对定位 ，并设置right 和bottom 为0，注意，还要为app 容器添加一个相对定位 ，因为如果不添加的话box 容器就会以父容器body 为榜样了，就无法实现上图在app容器的右下方了，再设置app 容器left为100px，app容器以自身页面为榜样。

变化的代码：

xml 复制代码

    <style>
        #app{
            width: 200px;
            height: 200px;
            background-color: #26dc8a;
            /*相对定位,设置后，才可以作为box的参考系，若没加，box则以body为参考系*/
            position: relative;
            left: 100px;
         }/*id权重更高 */
         .box{
            width: 50px;
            height: 50px;
            background-color: #11110d;
            /*绝对定位,一个容器只有设置了一个定位后，才可使用top,bottom...*/
            position: absolute; 
            right: 0;
            bottom: 0;
         }
    </style>

还可以不用给box容器添加绝对定位，通过给box 容器添加一个相对定位 ，并设置bottom 和right为150px也可以实现相同的效果。

变化的代码：

css 复制代码

 .box{
            width: 50px;
            height: 50px;
            background-color: #11110d;
            /*绝对定位,一个容器只有设置了一个定位后，才可使用top,bottom...*/

            position: relative;
            left: 150px;
            top: 150px;
         }

实现效果图：

分析：想要实现上面的效果图只需要给box 容器添加一个固定定位 ，并设置bottom为0；

变化的代码：

css 复制代码

.box{
            width: 50px;
            height: 50px;
            background-color: #11110d;
            /*绝对定位,一个容器只有设置了一个定位后，才可使用top,bottom...*/

            position: fixed;
            /* 固定定位，相对于屏幕 */
            right: 0;
         }

总结

position: absolute; 绝对定位，它需要找榜样(会相互对于榜样来定位自己)；
position: relative; 相对定位，可以作为别人的榜样，也相对于自己本身的页面位置来定位；
position: fixed; 固定定位，相对于浏览器的屏幕来定位自己；