尚硅谷前端基础 (70)

好，我们接着往下说，刚刚我们介绍了一个相对定位啊，这个特点一定要给它记住了啊，开启相对定位以后，不设置偏移量，元素不会发生任何变化啊，开启相应定位你设置完了，你不设，不设偏移量你跟没设置一样啊，然后第二一个哎，相对定位参照于元素在文档之中的位置进行定位啊，然后相对定位会提升元素的层级啊，不会使元素脱离文档流，也不会改变元素的性质啊四五实际上是。一条啊，一条不多说了，再往下进行，我们下边一个我们叫做一个零二，我们说一个绝对定位，呃，绝对定位的话，我们还是这么一这么一套活啊，这么一套活，我们把这个东西给它粘过来，CTRLCCTRLV粘过来以后呢，我们来改变一下它里边这些东西啊。我们给它去掉，呃，运行一下。在这里啊，我们来整一个东西啊，整个东西现在呢，我们先写一下我们要讲的叫做一个绝对定位啊，绝对定位怎么就算绝定位了，当我们这个元素的这个position POI t position属性值设置，为什么呢？哎，设置为设置为我们叫做AB salute，哎则哎，开启了我们元素的一个绝对定位啊绝定位，所以怎么算开启绝定位了，我们相对定位我们用的是一个position，一个叫做relative啊PR直接快捷键是不是就开启了相定位啊，那你要想开启绝定位，那你就可以写一个PV，诶叫做absoluteut，这个时候就开启了一个绝对定位啊，开启了绝定位，那这个时候你会发现我刚刚开启一个绝定位，我这个页面这里边是不是就。

有变化了，有变化了对吧，有什么变化，你会发现我那个三没了，诶三怎么会没呢？三并不是没了，三跑哪去了，三实际上它跑到了我们这个二的下边了，所以其实通过这一点你就能看出很多的问题啊，很多的问题，所以这里面啊，我们来说一下，我们来说一下我们这个绝对定位的一个特点，绝对定位的一个特点，那第一个首先我们会发现我设置完这个绝对定位以后，我们来看一下我二啊元素这个二的这个位置有没有发生变化。二是不是还在这儿啊，哎，二并没有发生变化，所以第一个特点，开启我们这个绝对定位以后，绝对定位后如果什么呢？不设置我们这个偏移量，我们这个元素的位置不会发生变化，注意这个描述跟我们刚才那个相对定位就不一样了，相对定位是什么？相对定位是元素不会发生变化，而这我改了，改成什么了，元素的位置，所以在这儿的话，二实际上只是位置没变，剩下的其他的很多东西都变了啊，都变了，然后第二一个还有什么呢？哎，我们说了开启我们这个绝对定位后啊，绝对定位后。

哎，我们来看一下我们的这个元素会完，诶会从我们这个文档流中脱离啊，文档中脱离这怎么看出来的，很简单吗？三数没了，三数被二盖住了，哎我给他来一个，我把三给它写大点，三我改成一个300再大点，三是不是让二盖住了，哎他跑二下边去了，为什么跑二下边去了，因为二从文档中脱离，三是不是自然就往上拱了，哎三自然就上去了啊所以第二一点开启绝对定位以后，元素会从这个文档流中脱离啊，然后第三一个从文档流中脱离了，还有一个特点，那就是什么呢？哎，绝对定位会改变我们这个元素的一个性质啊，会改变我们元素性质啊，那其实呢，这个跟二是一天。

一条为什么性质变了，因为脱离文档流了啊，脱离文档流了，那这个特点跟那个浮动那个那个托拉文档实际上是一样的，主要是什么呢？哎，主要是我们的行内变成块，哎块的宽高干嘛呢？哎被内容撑开啊，被内容撑开我就不演示了啊，到时你可以自己测一下，我们来看一下，我先把这个决定位我给它住了，我们就演示一个块元素，现在呢，我不写宽度，不写宽度我们说了元素不写宽度，默认宽度就是负元素的全部，对吧？但是当我给它开启了绝对定位，这时候你看宽度还有没有了，宽度只剩那么一个二了，为什么？因为这个时候它就被内容撑开了啊，就被内容撑开了，为什么？就是因为决定位脱离了文档流，很简单，不多说了，好，我把这宽度给整回来，所以这个是我们这三点，然后第四点其实也简单叫什么呢？绝对定位会使我们这。

这个元素提升一个层级啊，会使元素提升一个层级，所以这时候你看是二盖住三，而不是三盖住二，证明什么？证明二的层级比三高啊，所以注意绝对定位也会提升元素的层级，好，我们把三先改回来，这个是我们说的这么些特点，对吧？这么些特点，然后接着我们来看，那既然是定位了，我们是不是要通过我们偏移量去改变我们元素的一个位置，哎，那怎么改，那怎么改，还是这四个偏移量top left，哎，Right，包那问题是偏移量好整，那我们要先要搞清楚一点，我们的这个绝对定位的元素，它是参考哪定位的，那既然要看参考哪定位的，我们这里是不是就要先找到我们这个元素的一个坐标的原点在哪儿啊？坐标原点在哪儿呢？哎，我们还是那一个老办法，我们直接给它设置一个life的零。

嗯，然后来一个TOP0，我们来看看跑哪去了，诶，他是不是跑到。这个位置，哎，跑到这个位置，也就是说坐标原点是在这儿，那也就是说它的参照物是不是在我们浏览器的这个窗口这儿啊，诶这是不是一定是这儿呢？是不是呢？不一定，为什么呢？因为现在我页面的结构比较比较简单，比较简单，我这只有一个BOX2，它只有一个负元素是boy，它是不是没有别的复元素啊，哎，所以呢，现在呀，我让这个情况呀复杂一些，怎么复杂，我在这儿啊创建一个。

Div点一个BOX4，哎，我这写一个二四，然后四里边再写一个div点一个BOX5，然后呢，我这再写一个五，哎，把二呢放到这个五里边，放五里边，那现在呢，等于我给我的BOX2又找了两个祖先对吧，一个是副元素BOX5，还有一个是祖先元素BOX4，那这里边呢，我也给他们设置一下样式，我们先来一个BOX4 box4呢，Y我来一个400，来一个400，然后background background我来一个这个颜色吧，看看，哎这个颜色哎呀有点有点难看是吧，有点难看，很ma头呢。哎，Model还行是吧，那这一块我们设置完了，然后我再来个点一个这个BOX5 box5呢，我要比这个四稍微小一点啊，BOX5呢，我的外来一个这个300看也是300，然后background color background color，我们来一个这个这个颜色，这什么颜色好就是它了，好，那现在我们这儿就已经设置完这个结构了，那现在注意了啊，现在注意了，现在的情况是我们的二有一个负元素是五，五有一个负元素是四，那现在我还是给它开启一个绝对定位，那我要看它这个原点是还在这个位置还是跑这儿来呢？哎，我们来看一下啊，我把绝定位打开看效果，诶发现什么效果了，发现现在它的原点时候还是在这儿啊，没有任何的变化啊，没有任何的变化，那是怎么回事儿？哎，我们来助调，现在干嘛呢？哎，我给豹四啊开启一个相对定位。

然后呢，我给BOX5啊也开启相应定位，现在看着了，我这个position of salute，我给它打开再看啊去哪了，哎，看这还还是不是在这儿了。

不在这了，哎，不在这了，跑哪去了？是不是跑这儿去了？哎，跑哪了？跑到BOX5的那个左上角了吧，哎，左上角了，好，再来啊，我把BOX5的相对定位给它关掉啊，关掉我们这一关走一个，跑哪去了？是不是跑到这个BOX4这了？哎，四这了，我们再把BOX4这个给关掉，跑哪去了？是不是跑到这儿去了？诶，这是什么情况，这是什么情况？哎，那这里边我先给你下结论，我们的这个绝对定位元素它是什么呢？是相对于其包含块进行定位的啊，是相对于其包含块进行定位，那这里边其实你结论很好记，对吧？绝对定位元素是相对于其包含块进行定位的，但是问题就是包含块是个啥玩意儿？哎，包含块到底是个啥玩意儿啊，包含块，所以这里边我们要解释一下我们这个包含块的概念，包含块其实我们早就应该解释了，早就应该解释了，其实我们之前也看过一东西，比如说我们看一些属性，我们看过什么呢？我们有Mar。

Marin的话，它这里边其实会有一个，这个我们都知道是吧，我们这些什么marin啊什么呀，他们都可以设置一个百分之百分比的一个值，对吧，百分比，那涉及到百分比了，它就会有一个参照物，比如说我marin设置一个百分百，那这个百分百，那这个百分百这个到底是参考于谁啊，参考于谁，那这时候你看这这写了一个percent ages是吧？Percent就是告诉你这个百分比是参照于谁的，人家告诉你了参照于什么呢？诶containing block的宽度，诶也就是说我的外边距的值的大小的百分比是参照于包含块的宽度来计算的，那这儿就提到了一个containing block叫做一个包含块，实际上这个东西在我们文档里会看到很多，那问题就来了，这包含块到底是个什么玩意儿，诶，我们这儿就来解释一下，那这个包含块啊，我们要分。

诶两种情况来解释，一种呢，是我们这个什么呀？哎，是我们这个，哎，普通元素啊，普通元素或者我们叫做一个，诶文档流里边元素啊，文档流元素我们就叫这个普通元素吧，正常情况下啊，正常情况下，正常情况下我们包含块是谁？正常情况下我们这个包含块就是离我们这个当前元素最近的祖先块元素，包含块就是离我当前元素最近的祖先矿元素，比如说我的一个结构是一个div div里边又放了一个什么呢？又放了一个div，又放了一个div，那这个时候注意了，这个div的包含块就是它外边这个div，懂这意思吧，就是它外边这个div，那如果是这样的啊，如果这样的，我这是一个div div。

Div里边呢，有一个SPASPA的话里边还有一个em em里边写一个hello，那这个时候对于SPA来讲，包含块很简单，包含块是不是就是div啊，很简单，但是对于em来讲，Em的包含块是谁呢？诶，Em的包含块也是div，因为SPA是个行内元素，它不算包含块，所以它不能作为包含块，所以对于em来说，最近的元素就是div，所以div就是它的包含块，所以正常情况下包含块就是离当前元素最近的祖先元素，通常都是负元素啊，通常都是负元素，所以这是我们正常情况下，但是在我们这种定位的情况下啊，我们这种什么呀？哎，我们这种开启我们这个绝对定位的情况，绝对定位的一个包含块，那这个时候它的包含块是谁啊？包含块是谁？那其实很简单，我们刚才也提到过了。

我们的绝对定位元素是参考于包含块进行定位的，所以你看当我给BOX4开启相对定位以后，那实际上现在零点原点是不是在这儿啊，原点在这儿，那么就是说我们的二是相对于四定位的，那现在对于二来说包含块是谁？哎，包含块就是四，那当我给我们的BOX5开启绝定位相对定位以后，那我们的二是不是相对于原点是不是在这儿了，那现在等于它是参考于BOX5。去定位的，那现在。对于我的BOX2来说，它的包含块是谁？包含块就是BOX5啊BOX5，所以这个时候我们来说决定位的包含块是谁？包含块叫什么？哎，决定位它的包含块就是离它最近的开启了定位的先元素啊，离它最近的开启了定位的祖先元素，什么叫离它最近的，什么叫离它最近的？那就是诶，咱离他最近的简单对吧，离得最简单，我什么叫开启了定位。

反复再说，只要你的position的值不是absolute，都叫开启，不是那个static啊，只要你的position值不是static，都叫开启定位，所以这个时候我们来看四和五是不是都开启定位啊，那这个时候到底四和五谁是它的包含块呢？哎，那我们就要看谁离得近了，哎，谁离得近呢？二跟这儿呢，五是它的副元素，四是它的祖先元素，那这个时候是五离得更近啊，哎，五离它更近，那这个时候它就相对于五定位，当我们这个五没有开启相对定位，那这个时候是不是四离得近了，所以这个时候就找找四了，那如果四也没有呢，他就要看四的负元素是谁呢？是body body有没有开，没有开，那找不找，不找，那问题来了，现在就出现这么一个问题，所有的祖先元素，它是不是。

不是都没有开启定位啊，哎，所以注意，如果所有的祖先元素都没有开启定位，则什么呢？哎，则我们的这个。相对于什么呢？相对于我们的这个根元素进行定位，也就是说什么意思？对于BOX2来说，它去定位他先看什么？看五你开没开启定位啊，开启定位了我就相对于它没开启定位，我再看四，四你开没开启啊，开启了我就相对于四没开启我看body body开没开启啊，没开启开启了我相当于body没开启，没开启body这边是不是只剩al了，那这个时候我就相对于我们的根元素，也就是HTML，所以为什么我们都给他住了以后，他跑这来了，为什么？就是因为都没开启，它就相对于谁呢？相对于我们的这个根元素啊，根元素，所以这个时候我这写的不对啊，包含块就是离它最近的开启了定位的组先元素，如果所有组先元素都没有开启定位，则什么呢？则根元素，哎，就是它的什么呢？它的一个包含框啊，它的一个包含块。

所以啊，像我们的HTMMR，我们叫做根元素对吧？根元素它还有一个名字叫做初始包含框，叫做一个初始包含块，换句话说，哎，谁都没有诶，谁都没开启定位，谁都不是包含块，那么最后就找一个H填毛啊毛，所以啊，这个结论很简单，绝对定位是相对于其包含块进行定位的，而难点在于你要搞清楚包含块到底是谁，这个正常情况下这都不用记，你只需要去去记这个绝对定位它的包含块是谁，开启了定位的最近的祖先元素啊，开启了定位的最近的祖先元素，所有的祖先元素都没有开启定位，那么就参考于谁呢？参考于初始包含块，也就是H02我的根元素啊，我们的根元素。

好，那所以现在的话，你的所有定位，你去摆放它的所有位置，现在的话都是参考于我们这根元素，根元素可能就是这儿，对吧，根元素你就可以随便摆了，对吧，你一说我想把它摆到右下角，摆到右下角怎么摆呀，那你就是bottom，哎，BOTTOM0，然后你再来一个这个right来一个什么呢？Right来一个零是不是就跑到右下角了，哎，因为它现在都是相对于我们的根元素，但是如果你给BOX4开启了一个相对定位，那这个时候就跑到BOX4的右下角啊，所以你要搞清楚这个定位的一个参照物，是啊参照物是好，那这里是我们说的一个绝对定位啊，几个概念还是先去记一下，真正的使用我们还是得需要通过我们的练习，诶来实践啊来实践，好，我们先听一下。