尚硅谷前端基础 (69)

好，那讲完了我们的这个clear fix，那等于我们这个浮动就可以暂时告一段落了，那总而言之的话，浮动的一个主要作用，目前来讲，对我们来说就是让元素可以横向去排列，但是你要知道，与此同时的话，浮动它实际上会带来一个高度塌陷的问题，为什么会有高度塌陷，就是因为浮动脱离了文档流，脱离文档流没有办法撑起浮元素的高度，于是高度就要塌陷了，所以解决高度塌陷的问题，我们就是用的一个可粒尔fix啊，你可以不理解它是什么原理，但是最好还是理解啊，你如果不理解，你就把这东西给我硬背下来就完事儿啊，没什么好说的，但是呢，最好理解一下，因为他也确实确实不难啊，确实不难，然后呢，我们就可以进入到我们的下一个话题啊，进入到我们下一个话题，下一个话题我们开开始说什么呢？哎，我们要说一块新的内容，哎，我们叫一个零五，叫做一个position。Poion叫做一个position啊，那在这里边我们来新建一个文件，那什么叫position呢？哎，Position就是我们所谓的叫做定位，诶什么是定位啊，什么是定位，我们先写个简单的页面啊，那这里面呢，我们就写一个这个div，诶点一个BOX1啊，然后呢，呃，多写几个啊，点一个这个BOX2，然后再加上一个点一个BOX3，创建这么三个盒子啊三个盒子，然后呢，我们写点样实在标签，点一个BOX1 box1呢，Y200 hat200，然后呢，Background color background color，我们来井号边。

运行起来啊，这应该Y也是200，下边呢，我复制一下，哎，这来一个这个二，哎，这来一个三，换一个颜色啊二呢，我们来一个orange啊，三呢，我们来给它来一个yellow啊，我们创建这么三个块啊，三个块，三个块啊，三个块现在我们创建完了，那现在我想做一件什么事儿呢？哎，我想做这么一件事啊，我想把我的中间这个，也就是我的这个box box2啊，我给你写上数字吧啊，我们这来一个123啊，写上数字啊，BOX123这三个数字啊，字数太小了，我们给它改一下自己大小，呃，Fo size fo size，我们改一个60个像素啊把字改大一点，好，那现在我们这是BOX1BOX2，还有BOX33块，那现在我需要一个什么效果呢？诶，我希望的效果是把BOX2啊，把BOX2移到哪呢？移到BOX1的上面。

哎，那注意了，诶同学说这好像也没什么难的呀，注意了，我希望的是什么呢？只有BOX2跑这来了，然后别的元素不会发生任何变化，也就是说最后完了效果应该是这样的，这是一个一，这是一个二，然后在这是一个三，对吗？哎，我要实现这么一个效果，那这个我们要怎么做？因为我们原来有的手段能不能完成，哎，其实也能完成，我们想一下，现在呢，我想把BOX2移到这里，那实际上我们先分两步，两个步骤来做第一件事儿，我能不能先把BOXS2移到这儿来。

能不能移到这，哎移到这儿太简单了，我们直接给它设置一个margin left，它是不是就跑这来了，哎，In left，所以我们给BOX2设置一个marin left，比如说我来个100个像素，诶100还不行，得是200，因为我们设置200乘200的，那这个时候这一个BOX2就挪到这儿来了，哎，挪到这儿来了，诶就很完美了，对吧，很完美了，那好，那接着再来说，那现在我还想干嘛呢？那我这是不是最终是不要把它放到这啊，也就说我还要把报字往上挪200，那我怎么让它往上走，往上走哎，那我们说了，我们有一个margin top啊margin top margin top呢是控制上下位置的，我来一个100像素呢，它就往下走100，对吧，我如果是负100呢，就往上走100，所以如果你希望往上走200，那就是负200，这个我们之前都说过了，那现在我是不是就成功的把BOX2挪到了box的边上，诶很简单，但是呢，这个时候也产生了一个问题，什么问题呢？诶，BOX3是。

不跟着也上来了，为什么也上来了，因为BOX2我是负200以后，负200以后他等于往上挪了，但是这个时候box这块位置数没有人占了，哎，没有人占了，那BO3就当仁不让，他是不是自己上来了，但是我们希望的是是不BO3还在这个位置不动啊，哎，不动，所以这个时候我还得把BO3给拽下，给BOX3我再来一个Mar top来一个200强度，那这个时候BOX3是不是下来，哎，也就是说我通过我们的marin能不能完成这么一个事。也可以完成对吧，但是很明显我这块做起来是不是有点麻烦呀，本来我就想动这个BOX2，我想让BOX2移动移动，但是呢，我发现我一元BOX2的话，BOX3也跟着动了，那这个时候我又不得不去移动这个BOX3，那假如说待会我要去调整BOX2的位置，那这时候如果我还是通过in的话，那我是不是还得去整BOX3呀？哎，所以这样的话做起来就很麻烦，你动一个元素，他要牵扯着别的元素，我们调整一个还要必须调整另一个，我们这样维护起来就会很很痛苦啊，很痛苦，那其实你即使说我不用margin，我用浮动去整你，你不可能不用margin，你还得用margin，所以你用浮动整更麻烦啊，你用浮动去写这东西更麻烦，还有高度塌陷的问题，对吧，所以这样就会产生很多的问题，所以等于说用我们现在有的技术手段，我们没有办法很灵活的把一个元素摆放到任意位置，也就是我希望的是什么呢？这box。

这啊，我想摆哪儿我就摆哪，而且我摆的时候呢，很方便，没有任何的干扰，我们是不是希望有这么一个效果呀，哎，所以这个时候我们先把它恢复原状，那这里就是我们要说的这个新的东西叫什么呢？叫做一个定位，定位我们叫做一个position。

哎，Position，那什么是定位，哎定位是什么呢？哎，是一种，哎哎是一种我们叫做更加高级的布局手段。哎，更加我们这个高级的一个布局手段，什么叫更加高级，那我们想一下，我们之前讲的这些什么浮动也好，讲的我们这些盒模型也好，你摆来摆去，你你只能是什么，你只能说我想让这盒子横着排，我想让这盒子竖着排，对吧，你只能是做一个宏观的一个外围的一个大局的一个一个布局，而我们现在比如说我现在页面里就有这么一个报括塞，我想把这个东西干嘛呢？摆放到这个位置，那好我问你了，我要通过定位，我我要通过这个外边距，或者通过浮动去做这个事儿，是不是会非常的麻烦呀？哎，对，所以我们用我们之前这些手段，并不能很灵活的把一个元素在我们的页面当中任意的去移动，那是这个事儿形成做我们的浮动可以做，所以哎不是浮动啊，我们定位也就是说通过定位啊定位嘛，哎通过定位我们可以将一个元素哎摆放。

等到我们这个页面的一个什么呢？哎，任意为，也就是说有了定位以后，就等于你让你页面的元素全都活过来了啊，就都活过来了，就像一个一个积木一样，可以任你摆布，你想把它摆在哪儿，你就可以摆在哪儿，这就是铺的定位啊，非常神奇的一个东西，那这里边我们来说一下我们怎么使用定位啊，我们使用我们这个什么呢？诶，POI position属性来设置我们这个定位，也就是说我们这里边你要想整定位，你先得写一个position啊position position属性来设置定位啊，设置定位你看我们这个定位是不是有这么多种值啊，哎，这么多种值我们来一块来说一下的可选值，可选值第一个值我们叫sta，叫做一个static sta叫做T，叫做一个。

它是什么呢？它是一个默认值啊，它是一个默认值叫什么呢？元素是静止的，诶没有开启定位，所以这玩意儿啊，你写跟你不写没有什么区别啊，你写跟不写没有什么区别，你写上它也这样，不写也这样，因为它叫做一个默认值，所以你记住了以后，我们会提到一个概念，叫做开启定位，还有没开定位，什么时候叫没开启定位，只要你的position值是static，那么就没开启定位是其他值，其他的任何值都算开启定位，只要不是sta static都算开启定位，那除了static还有哪些值呢？哎，我们来往下列一下，下边一个我们叫做一个relative re叫做一个relative，这叫做开启我们元素的一个相对定位啊相对定位什么是相对定位？别着急，待会我们一个个来讲，下边一个我们叫做。

啊，Absoluteut AB，诶，Absoluteut so absoluteut叫做开启我们元素的一个绝对定位啊，绝对定位还有一个我们叫做一个fix啊，Fixed叫开启我们元素的一个固定定位啊，固定定位还有最后一个用的不太多，我们叫做sticky s t，诶，CKY啊sticky叫做开启我们元素的一个年制定位啊制定位，也就是说我们在我们的这个。呃，Position，我们这个定位系统里面一共有这么几个可选值，Sta它没定位啊关的啊，Relative叫相对定位，Absolute叫做绝定位，Fix叫做固定定位，Static我们叫做一个诶粘制定位，那其实我们之前一直用的都是什么诶，都是static这种没有开启定位的情况，那接下来我们就要研究一下我们这几种定位形式，当然我们先研究第一个，我们叫做一个相对定位啊，所以我们来研究第一个相对定位，哎，那我们来说怎么去用相对定位，什么时候开启相对定位啊，当我们这个元素的position属性值POI position属性值设置为什么呢？设置为relative，诶relative时，则开启了我们这个元素的一个相对定位，所以怎么算开启相定位了，你只需要把它的position设置成。

Relative，就算开启相定位了，那现在我给这个position，我给这个BOX2的position设置了relative，那现在意味着我开启了BOX2的相对定位，那我有没有给一给三设置，没有那么OK，现在只有二开启了相应定位，但是其实你会发现我这写了它这有没有什么区别啊。

没有什么区别，是不是没有任何变化呀，哎，没有任何变化，所以这里边我们要总结一下我们这个相对定位的一个特点，相对定位的一个特点，什么特点呢？啊，什么特点，我们的这个相对定位第一个元素开启我们这个相对定位以后，不果不设置我们这个偏移量元素不会发生任何的变化啊，元素不会发生任何的变化，诶首先我们先说开启相应定位以后，如果不设置偏移量元素不会发生任何变化，那什么是偏移量呢？

诶，不知道，不知道怎么办，你就你看我们现在BOX2里边的属性，有没有哪个属性你不认识，没有你都认识对吧，你都认识，而你有没有学过偏移量这个东西啊，没有，所以在这里边不管偏移量是什么，你可以肯定的一点是，在这里边你有没有写偏移量，没有，因为你压根儿不认识，而这里边是不是就没有那个不认识的东西，所以你肯定是没设置偏移量，所以这个时候我们就是处在这么一种情况，开启了相对定位，而又没有设置，天一亮，那么此时此刻二跟一三它实际上没有什么太大的区别啊，没有什么太大的区别，那这个时候它的主要的一个区别就是二可以设置偏移量，而一三是不能设置的，因为一三没有开启定位，于是我们这个问题就变成了，什么是偏移量，什么是偏移。

偏移量我们叫做offet，什么是偏移量？当我们这个元素开启了这个定位以后，我们可以什么呢？我们可以通过我们这个偏移量，可以通过偏移量来设置我们这个元素的一个位置，哎，就这么一个动力，这个偏音量有点像什么呢？有点像我们这个margin margin top margin left margin bottom margin这个right，通过margin是不是可以去改变我们元素的位置，哎，那同样通过偏移量可以去改变我们这个也是可以改变我们元素的位置，并且偏移量它比margin更灵活，因为偏移量像我们margin，我们说了top left影响自己，Right bottom影响别人，对吧？但是在我们的这这块的偏移量的话，他不会影响别人，不会说我二一移动，诶把三给挤跑了，诶我三三移动，把二又给挤跑了，不会有这种情况。他只会移动自己，无论。

还是top left的bottom，还是什么right这些偏移量，它只会挤自己，不会挤别人，那么有几个偏移量呢？哎，有几个偏移量，我们来说一下，第一个我们有一个这个top啊，第二个我们有一个这个bottom，诶第三个有一个叫做light，还有一个我们叫做right啊，如果英文语你懂的话，RIG你就知道了，实际上这就表示的是什么呀，是上下左右，上下左右什么意思，我们来看一下，嗯，画一个简单的示意图说明一下，其实也挺好理解的，但是我还是想给你说的清楚一点啊，清楚一点，那假设呢，诶，这个是我们的一个，呃，一个网页吧，诶假设是一个网页，在网页里呢，我创建一个这个矩形啊，成一个正方形。那现在呢？呃，我现在假如说这个就是我那个定位元素啊，这个就是我那个定位元素，那现在我想干嘛呢？哎，我想把它往下移动啊，往下移动如果用margin的话，那我们这是不是要设置一个margin top呀？哎，Marin top margin top的距离这越大，那它是不是越往下移动啊，我写margin top写一个100就往下移100 margin top写一个200，是不是就移动一个200啊，哎，这个是我们说的一个margin top，然而在我们定位系统里边，这个距离我们就不叫margin top了，我们叫什么呢？我们就叫top top什么意思？就是我们这个定位元素啊，这个叫定位元素和什么呢？和我们定位位置，那现在就这来说，定位位置就是这个红块啊，就是红块定位元素和定位位置上边的一个距离，上边一个距离，这个距离我们叫做一个top，这个距离越大，我们的这个元素就越往下走，懂意思吗？距离越大，元素就。

越往下走，所以这里我们就可以说第一个值我们叫做一个top top是什么？Top是我们定位元素，定位元素和我们这个定位位置上边的一个距离，上边的一个距离，其实你就可以把它想象成是一个外边距，但是它不会影响别的元素啊，不会影响别的元素，所以这个时候top可以决定什么，可以决定我们的一个元素的垂直的位置，哎，你是靠下一点，你是靠上一点，是再靠下一点，是再靠上一点，这个可以由我们那个top就对，因为这个距离越大，你是不是就越往下走啊，哎，越往下走，所以这时候你看啊，我假如说我想让BOX2往下走，往下走怎么办？我就可以给BOX2设置一个top，比如说我写一个top来一个100，诶我写一个top，我们来一个100个像素，那这时候你看BOX2就往下走了吧，哎，往下走了，你要注意一点，他跟妈这有什么区别，如果。

我这设置是margin top，那这个时候它不仅二往下走，它是不是还会挤三呀，但是我用的是top，你看只有二动，三洞没动，三没动，这就是他们俩一个最大的一个区别，并且这个东西只适用于定位元素，也就说这个元素你开启的定位你可以用top，如果你没开，你比如说我给报括三这写一个，那对不起，没用一点用，没有懂意思吧，所以一定要开启定位才可以设置我们这个偏移量，那这个第一个值说的是一个top啊，定位元素和定位位置的上边的距离，那现在我们再来看下边一个，那还有一个叫什么呢？哎，我们来看除了上边距离，我们在这儿还有一个，这是不是还有一个下边，诶，下边定位元素的下边和我们定位位置是不是也有一个下边的那个距离啊，这个距离我们叫做一个bottom啊bottom bottom叫什么呢？诶叫做我们这个定位元素。

定位元素和我们定位位置下边的一个距离叫做一个bottom啊，也就是说这个距离叫bottom，那我就不演示了，同样它和top一样，也是可以决定我们这个垂直位置，就像那个什么呀，就像那个margin bottom一样，但是它是会移动自己的，它不像那个它是移动别人，它会移动自己，所以其实我们垂直方向有两个值控制，一个是什么呢？一个是top，一个是bottle，所以啊注意我们元素，我们定位元素垂直方向的一个位置有什么呢？有我们这两个，由我们这个top和这个包，哎两个属性来控制啊来控制哎，来控制，那这里边注意了，哎这边注意了啊，那这两个属性共同来控制垂直方向，那通常情况下，通常情况下我们什么呢？只会使用。

其中之一只会使用其中之一，哎，因为你就一个方向嘛，就是垂直方向，诶你是往上点还是往下点，你用一个属性就可以把这个垂直的位置就可以去确定了，没有必要使用两个属性啊，没有必要使用，所以通常情况下只会使用一个，那所以这两值来说的话，那就是top值，Top值越大，哎，我们这个定位元素干嘛呢？定位元素越向下越向下移动。

向下移动，而我们这个包值越大呢？哎，我们这个定位元素越什么呢？哎，越向上移动啊，越向上移动，所以它俩正好相反啊，正好相反向上移动，所以啊，那我们说了top是什么，Top是上边和上面的距离，那你想这个距离越大是是这哥们越往下走，哎越往下走，那我们bottom他们呢，是下边和下边的距离，这个日值越大是不是就越往上走啊，哎，越往上走，所以你注意就是我们这些啊，包括待会儿我们要说的这个left right，包括我们刚刚说的这个top，还有bottom他们都是值越大，它向那个相反方向走，它是向哪呢？实际上就向中间走，Top值越大越往下走，Bottom值越大越往上走，Left值越大越往右走，Right值越大越往左走，它都是往反方向走的啊，往反向走的，所以垂直方向就这么两个，一个叫top，一个叫bottom啊，通常情况下只需要用一个啊，通常情下只需要用一。

好，那下一个我们叫做left left就简单了，Left left简单left什么这一段值是不是叫left，哎，Left这个值越大它就越往右走啊，越小就越往左走，那这个值右边和右边的值叫做right，这个值越大它越往左走，这个值越小是不是越往右走啊？哎，所以这个是我们又两个值，一个叫做left，这是什么呢？这是定位元素和我们定位位置的一个左侧的一个距离啊，左侧距离，哎，然后呢，Right是什么呢？Right是我们这个定位元素和我们定位位置的一个右侧距离啊右侧距离，那这两个什么呢？哎，我们定位元素，哎，水平方向的一个位置由什么呢？哎，有我们这个life的和哎我们这个right，哎两个属性控制啊，属性控制也是通常情况下我们只会什么。

呢，只会使用一个，哎，只会使用一个啊，我不会说都设置，因为两个点就是两个点就是两个坐标是吧，一个X轴的坐标，一个Y轴坐标，我就可以确定一个点的位置了，同样我这个也是啊，我们。确定一个元素的位置，其实我们只需要水平方向找一个值，然后垂直方向再找一个值就行了，水平方向那就是left的right里任任选一个，那垂直方向就是top和bottom里任选一个，随便选两个值就可以确定一个位置啊，通常情况下只使用一个，那我们这里边也是一样，Life的越大，元素越向右，哎，越靠右，哎，我们这个right越大呢，诶，Right越大元素越靠左啊，越靠左，所以这个时候我们虽然有这么几个值，有四个值，但是呢，哎，但是我们通常情况只用两个。

Top bottom里边挑一个，然后left right里边挑一个就OK了，你要知道它代表一个意思啊，代表一个意思，好，那这几个值我们说完了，然后我们接着往下说，然后注意啊，注意这几个值会生效，一定得是什么，一定得是开启了定位，再强调一下什么叫开启定位，只要你的position值不是sta，你是relative，你是absolute，你是fix，你是stick，都叫开启定位，只要不是static就行啊，只要不是static就行，所以在这里边BOX1还有三就没开启，因为他们是不是没有设置，没有设置position就是在这个，所以现在只有BOX2能定位，那BOX2能定位，好那我们说完这几个值以后，那现在我给BOX2开启了定位以后，我是不是就可以去通过这个这几个值来控制我们BOX2的位置了，哎，那刚才我想干嘛了呢？哎，我是。

就是想把BOX2给移到这来呀，哎，移到这儿来，那这个时候我要怎么移啊，怎么移，那这时候我需要干嘛呢？哎，我需要先把BOX2是不是往往左移啊，哎，先要往左往右移，对吧？先要往右移，往右移是我们水平方向，那我们是不是可以设置一个life的值，把它的left的值设置成这么大，是不是这玩意就就跑这来了，哎，就跑这了，所以这里我可以来一个left，我们来一个200像素，那这里面我们来看BOX2是不是挪这来了，哎，所以其实你看水平方向跟我们那个marin基本上区别不大，诶也是往这移，那接着来，那现在我是不是还想把它往上移啊，哎，往上移我们用的是一个什么呢？我们用的一个top，同样也是一个负200像素，然后二是不是移到跟一一边齐了，那这样我们就达到这样一个目的，那跟刚才的效果是一样。

样的，但是它的优点很明显，我这一块移动的二，我有没有去动别的元素，没有，我只设置了二的属性，无论是relative还是那些偏移量也好，我只设置了二的属性，而没有去影响别的元素，那这样我操作起来是不是就非常的简便，非常的方便了，哎，非常方便啊，所以这就是我们说的一个定位啊，这就是说一个定位，好，那简单讲的话，其实就是开启了定位以后，你就可以通过这四个值来任意的去移动元素了，但是这里边我们要转一个个，我们要先反映一下，诶我们这个life的是200像素，左边距是200，那我刚才是怎么描述的，叫什么呢？定位元素和定位位置的左侧距离，定位元素我们知不知道是谁？

定位元素就是BOX2，那问题来了，我的定位位置是谁呀？定位位置是谁？我们想一下，我这负200，因为我们要摆放它的位置，一旦说位置了，一定是一个相对的，我要相对你我在哪儿对吧，一定是有一个参照物的，不然你没有参照物，你说位置也没有意义，所以你只要说位置一定会有一个参照物，那我们现在BOX2的参照物是哪儿啊？我为什么说一移我就能给它移到这儿来呢？为什么一移能给它移到这儿来，为什么负200就往上走了？

为什么负200它没有出去呢？对吧？这是为什么？哎，所以这个时候我们要说一下它的一个参照物，那怎么看这个参照物，其实很简单，我们看参照物的话，其实你想一下啊，其实我们的定位其实就相当于是一个什么呢？是一个坐标轴啊，坐标轴，我们把一个元素在坐标轴上反复的去移动，只不过呀，我们这个坐标轴跟我们数学里边那个坐标轴不太一样，数学坐标轴数是这样的呀，而我们网页里面坐标轴什么呢？是这样的，它不会出去啊，它没有没有上边下边那个，这个就是我们的X轴，这个就是我们的Y轴，我们元素是不是在这儿去移动了，哎，在这里边去移动啊，你可以指一个X值，一个Y值，那这里边跟我们那个数学坐标轴不一样，地方数学的话，那这块是正的，这块是不是就是负的了，但是在我们这个网页里，这是正的，这儿也是正的，哪是负的，离开屏幕的方向是什么呢？是负的，懂这意思吧，所以这个时候我们想找什么，我们想找一下我们这个定位。

肺元素在这，也就是那个BOX2的参照物在哪，那参照物我们是不是直接找到这个坐标的原点就行了，哎，坐标的原点也就是我们那个00点，所以呢，怎么看00点，我们直接把left变成零，然后top变成什么呢？变成零，那这个时候我们来看看BOX2跟哪呢？BOX2是不是又回去了。又回去了，也就是说对于BOX2来说，它的00点在哪呢？它的00点在这个位置，那这是哪儿啊，这是哪？诶这个就是我们元素在文档流里那个位置吧，哎，这是不是就是它原来那个位置，哎，原来那个位置，所以这个时候我们要说第二点关键点我们叫什么呢？叫做相对定位是什么呢？是参照于我们这个元素在文档流中的这个位置进行定位的啊，参照于元素在文档流中的位置进行定位的，所以如果画个图体验的话，那它是什么呢？它的定位位置是什么？就是它自己。

画这么一个框啊，我把它画成一个蓝色，那比如说这个是我们这个方块原来那个位置，我在开启定位前它是不是在这儿啊？哎，我开启定位前它是在它的里边的，当我开启了定位以后，那注意了我这框框是不是可以移动了，哎，那这时候注意了我的life的值说的是什么？注意啊，这个蓝块表的是表示的是我开启定位前的位置，这个红的表示我们元素，那现在我说我设置一个left，这left表示是什么意思？哎，说的是什么呢？说的是我这个元素距离我们这原来位置那个距离，这个距离是多少？所以这个时候如果我这设置了一个life的200像素，那表示什么意思？表示什么意思？表示说我元素距离什么呢？距离我刚才那个位置有什么呢？有200，所以它这个定位都是相对于什么它的参照物，什么参照于它之前的位置，懂这意思吗？就好像说我。

我现在干嘛呢？我现在要离我现在的位置，哎哎，我要现在我要到我现在位置的这个右边200步，200步，那这个时候我是要往我的右走200步，往右走200步，那这200步是参考谁说的，参考与我现在的位置说的，所以这儿也是一样，为什么叫相对定位，相对于谁相对于自己的位置，所以我这儿写了一个200像素，这200个life的表示什么意思？表示的是我相对于我刚才那个位置是不是离200啊，刚才那位置距离200，懂这意思吗？哎，来想一下啊，那我如果写一个top，我写200表示什么意思？表示是距离我原来那个位置上边，原来位置上边是不是跟这啊，新的上边是不是跟这儿啊？它俩的距离是一个什么呢？是一个200，而我如果写的是一个负200表示什么意思呢？哎，表示我原现在的这个上边距离我。

原来那个上边是一个负200指的是什么呢？是这个距离，懂这意思吗？所以啊，一定注意什么叫相对定位，都是相对于自身在文档流中的那个位置进行计算的啊，相对于自身在文档流中那个位置进行计算的啊好，这个是我们说的一个第二个点，相对定位是参照于元素在文档中的位置进行圈的，也就是说它的位置无论你怎么算，它实际上都是参照于这块去算的，无论是bottom，无论是这个，哎，Right，都是相对于原来那个位置啊。好，接着往下说，那还有什么特点呢？现在啊看着了，我把这个left我改成100，改成100以后就会出现一种情况，二跟一是不是重叠起来了，重叠起来发现什么了，二是不是把一给盖住啊，二把一盖住了，那即使是什么呢？你放到三这也一样，它也会把这个三盖住啊，把这三盖住，那为什么会把它们盖住，那是不是证明二的层次比这个一，或者比这个三的层次要。

要高啊，哎要高，所以我们第三一个特点叫什么呢？哎，叫做我们这个相对定位，相对定位会提升我们元素的一个层级，它的层级会高于我们这个文档流中的一个元素啊，甚至应该说高于浮动元素，对吧，它的层级会比较高，我们之前不也说了吗？网页是一个多层的结构，当你设置完相对定位以后，它的层次就层次就高了，诶那层次高了，那注意我们要说一个问题，那你想一下这哥们有没有脱离文档流啊，有没有脱离文档流。

哎，我们来看看有没有脱离文档流，很明显你要看如果他脱离文档流了，他在文档流里边是不是就应该不占位置了，他不占位置了，那么这个三是不是自然而然就该往上去移动啊，但是现在你要看三有没有动，三没动，三是不是还在这儿待的好好的呀，所以二有没有脱离档流，没有啊，没有脱离文档流，所以第四点我们叫什么呢？叫相对定位，不会使我们这个元素脱离文档流，所以这个时候你看啊，我们也说过了，如果你不设置偏音量，它不会发生任何变化，跟没写一样，所以它不会脱离档流，那第五点就跟第四点其实是一条，叫什么呢？诶相对定位它不会改变我们元素的一个性质，诶叫什么呢？块还是块，行内还是行内，也就是说它不会改变元素性质，为什么没改变，就是因为没有脱离两个，那脱离两。

不就变了对吧？没脱螺档时，所以不会改变元素的一个性质，好，那这个是我们说相对定位的一个特点，刚开始接触的话会有点痛苦，你需要稍微的去离裂，稍微的去消化一下啊，稍微消化一下，然后你把这个东西自己测一下，其实你要做的其实就是把这二你给它移动到上面，你可以让它盖住一或者在一边上自己尝试去做一下啊尝试去诶实践一下啊实践一下，然后呢，你可以再试试，诶我相对定位到底有没有改变元素的性质，那怎么看？怎么看？哎，那你要看看它默认宽高便面，它是不是还独占一行，对吧，是不是还独占一行，那它是不是，哎，我的航天元素我设置完决定相对定位，它能不能这个。设置宽高对吧，你可以自己去实验一下啊，可以自己实验一下，但是刚但是刚才咱们提到依据。

会不会独占一行，那有的同学可能会说，老师，那现在你开启了决定相对定位，你把元素给挪这儿来了，那他现在确实不会独占一行了，哎，注意你不能看这儿，哎，你不能看这儿，你要看的是哪？你要看的是它原来那个位置，原来那个位置它是不是还站着呢？哎，这个位置它还站着呢，所以相对定位的话，你可以理解成什么呢？是一个人呀，他有这个灵魂出窍了，对吧，移出来的是他这魂，但是他那个肉体呢，还在这儿占据着什么呀，这个位置啊，你可以这么体会，所以这个时候它有没有独占一行，你要看它是这你们能看他这块啊，你要看它是这个位置，这个位置三有没有上来，没有上来，所以它依然是独占一行啊，独占一行好，这个是我们说的一个相对定位，我们先是来停一下。