首页手记谈一谈我所遇到的定位属性

谈一谈我所遇到的定位属性

标签：

Html/CSS JavaScript Vue.js

好了，开始说一下我今天要写的定位属性--position。其实我最近一直在想一个问题，如果用大家都能懂得思维解释一个问题，希望能给读者营造一个轻松的环境，又能让读者学到知识。

一、介绍定位这一家子

首先我们谈一谈positon，他是规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。而在position中生活着四个孩子：

相对定位（大娃）relative：不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
绝对定位（二娃）absolute：**脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
固定定位（三娃）fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
默认定位（四娃）static：默认值；默认布局。 二、技能介绍
上面大概也介绍了几口子的一些基本属性，但就算他脱离了基本的文档流，但是没有一个基本的技能还是无法来一场说走就走的旅游。于是我们在下面介绍一下他的几个技能。（注意四娃比较懒惰，并没有学习这几项技能）

①left ：表示向元素的左边插入多少像素，使元素向右移动多少像素(负数向左)。
②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素(负数向右)。
③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素(负数向下)。
④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素(负数向上)。

二、有底线的大娃--相对定位

首先我们先结合一下代码看一下大娃的定义：

<!DOCTYPE html>
<html>
<head>
    <title>position测试</title>
    <style type="text/css">
        .main{
            width: 600px;
            height: 600px;
            margin-left: 200px;
            margin-top: 200px;
            background: red;
        }
        .dawa {
            position: relative;
            width: 100px;
            height: 100px;
            background: blue;
            left:600px;
            top: 200px;
        }
        .erwa {
            width:100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="dawa"></div>
        <div class="erwa"></div>

    </div>

</body>
</html>

效果如下：

某一天，大娃告诉未觉醒的二娃说，我想出去玩玩。然后二娃心想：大娃的房间比较舒服，于是就想着大娃出去之后，来一波鸠占鹊巢。但是却发现大娃虽然走了，但是大娃却把房间的门给锁上了。并且从上面的图示我们可以发现大娃是一个非常守规矩的小伙子，他只会相对于自己的位置进行移动。

三、守规矩的二娃--绝对定位

二娃觉得大娃这个人心机很深，为什么你都出们了还把房门关上。于是在悲愤之下，二娃觉醒了，想顺着大娃的轨迹去找大娃理论

<!DOCTYPE html>
<html>
<head>
    <title>position测试</title>
    <style type="text/css">
        .main{
            width: 600px;
            height: 600px;
            margin-left: 200px;
            margin-top: 200px;
            border: 1px solid black;
        }
        .dawa {
            position: relative;
            width: 100px;
            height: 100px;
            background: blue;
            left:600px;
            top: 50px;
        }
        .erwa {
            width:100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left:600px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="dawa"></div>
        <div class="erwa"></div>
    </div>
</body>
</html>

效果图如下：

等到二娃触发技能的时候，按照大娃的轨迹旅行完了之后却发现自己迷路了。等到大娃回来的时候，也发现二弟不见了。
这里可以发现二娃（absolute）是根据浏览器来进行偏移的，所以和大娃（relative）相对于本身偏移的路径不同。
于是生气的大娃决定用自己的黑魔法将整个房间给圈起来。

<!DOCTYPE html>
<html>
<head>
    <title>position测试</title>
    <style type="text/css">
        .main{
            width: 600px;
            height: 600px;
            margin-left: 200px;
            margin-top: 200px;
            border: 1px solid black;
            position: relative; //  黑魔法
            overflow: scroll;
        }
        .dawa {
            width:100px;
            height: 100px;
            background: blue;
            position: absolute;
            left:600px;
            top: 50px;
        }
        .erwa {
            width:100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left:600px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="dawa"></div>
        <div class="erwa"></div>
    </div>
</body>
</html>

使用完黑魔法的大娃回到旅游的去处了，继续玩耍。在大娃的敦敦教导之后，二娃便重新开始释放技能。效果图如下：

很多看官就会说了，命名没有看见大娃的身影，ok，那我们让大娃站在摄像机的前面。在大娃的css属性中添加一行z-index: 100;，效果图如下：

四、肆意妄为的三娃--固定定位

看到二娃和大娃在旅游那里玩的嗨的不行，三娃一想我也有技能于是便发功顺着大娃和二娃的足迹去追寻。

<!DOCTYPE html>
<html>
<head>
    <title>position测试</title>
    <style type="text/css">
        .main{
            width: 600px;
            height: 600px;
            margin-left: 200px;
            margin-top: 200px;
            border: 1px solid black;
            position: relative; //  黑魔法
            overflow: scroll;
        }
        .dawa {
            width:100px;
            height: 100px;
            background: blue;
            position: absolute;
            left:600px;
            top: 50px;
            z-index: 100;
        }
        .erwa {
            width:100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left:600px;
            top: 50px;
        }
        .sanwa {
            width:100px;
            height: 100px;
            background: black;
            position: fixed;
            left: 600px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="dawa"></div>
        <div class="erwa"></div>
        <div class="sanwa"></div>
    </div>
</body>
</html>

效果图：

但是当四娃的技能用完却发现自己和二娃一样也是迷路了，并且大娃的黑魔法也没有了什么作用。

五、总结

相信有前面的一些小例子，大家也差不多都明白了position的含义：
1、 relative定位会相对于自身进行偏移，并且并在文档流中留下空白区域。
2、 absolute定位如果在没加限制的情况下会以浏览器的四个角进行偏移。
3、如果父容器的定位属性是relative，则absolute会以父容器的四周为起始点进行偏移。
4、 fixed定位不受到任何的拘束，始终会以浏览器四个角进行偏移

说在最后

这篇是我想了很久才正式写下来的文章，我主要重新读了之前的文章发现以前写的文章比较的无趣，让人看了之后有种想睡觉的欲望，我可不想这样。所谓之学习就应该是快乐的，我希望能用这种方式感染、帮忙到每一个人。好了，睡午觉去了...

点击查看更多内容