尚硅谷前端基础 (72)

好，接下来我们来说我们的最后一种定位啊，嗯，叫做年制定位啊，年制定位。年制定位呢，是一种比较新的定位方式，它属于新推出的一种方式，嗯，所以呢，支持度不是特别好，可能在一些呃比较老的浏览器里面，它都不支持的，我们可以看一下啊，你直接在这搜一下position，在我们文档里搜一下position啊，嗯，Po推车，那这就是我们position是吧，它这给西列了是吧，可选值static abut fix的ste兼容性我们可以看一下，那下边应该会有一个表格，哎，你看fix的这监都没问题，Sticky你看都是CHROME56AGE1066才支持火狐，你看IE就是no IE都不支持对吧，I都不支持，所以它的兼容性并不是很好啊来，所以在这儿我们也只是给他了解一下啊，了解一下，然后还是正好顺便再说一下这个文档。

这个文档啊，写的其实特别详细，你看的时候呢，你可以去看一下，当然可能唯一不好的地方就是它都是这个，呃，英文的对吧，英文的这块会给你介绍是吧，介绍各种各样的特性啊，什么这个position的element叫定位元素啊，什么叫定位元素呢？是一个元素，它的计算这个position个position值呢，哎，在什么呢？你可以是relative，可以是absolute，可以是fix，可以是sticky，只要是这几个值都算是定位元素，哎，除了什么呀，你只要不是static都叫定位元素，所以刚才我们讲东西你在这儿都能看到啊，都能看到，包括我们说的什么static，哎，什么relative，什么absolute，在这的特点都可以去，都可以看到，然后呢，括我们这个包含块的概念在这你也可以看，你是不是有个链接你可以点呀，哎，一点过去，在这就给你介绍我们这个包含块，你看啊，如果possess属性是sta relative或者sticky是吧。

这三个值，那这个时候它的包含块是谁是谁是谁都给你写了，哎，如果你是的包含块是谁，如果是fix的包含块是谁，你看fix的包含块就是什么呢？就是它的这个viewpo，那wepo就是视口嘛，啊，就是视口，所以这个时候你就完全可以说fix跟absolute是完全一样的，只不过它们的包含块就变了，绝对定位，这个固定定位包含块就是视口，而我们的绝定位包含块就是离它最近那个开启定位的祖先元素，如果都没开，那就是找那个，哎，初始包向块S，它不会找视口，而我们的这个fix它会找视口，对吧？所以这里边的信息包含的非常非常全，所以如果你有时间把这个文档细细的去看一下，对你工作也好，还是对你面试也好，都会有非常非常大的一个帮助啊，非常非常大的一个帮助，好那这里不多说了，我们直接来说我们这个年制定位，那其实年制定位呢，你跟上边我们来看这写没写。

嗯。哎，你看这因为写了年制定位元素，其实它很像什么呢？很像这个相对定位，所以年制定位跟相定位很像啊，差不多，那这里面什么是粘滞定位，粘滞定位顾名思义吧，就是给它粘住，粘在某个位置，就好像什么呢？就好像，诶就是我们来看吧，直接看我这描述起来比较比较痛苦一点，在哪呢？看这个，其实刚才我们说的京庸这个，它就属于一种年滞灵域，你看啊，现在这个时候，我在这滚的时候，这东西它是跟着滚的，它是该它是随着你的动的，对吧，随着你动的，但是当我这个高到一定位置以后，你看它这个时候就不动了，诶就好像什么呢？就好像我这块有个胶水一样，它一到这儿就给它粘住了啊，这就叫做一个粘滞定位，也就是说当我们的元素固定到某一个位置的时候，它就不动了，这种就属于粘着定位，我们直接演示一下啊，演示一下我们之前做过有一个练习，呃，我们这个W3CW3C。

这个三死库，这个导航条我们做过这么一个东西，这个东西现在就是正常一个导航条啊，把它复制过来，这个需要复制CSS吧，CTRLCCRV我都给它粘过来，嗯，这个里边代码呢，CTRLCCTRLV，我把这删了啊。我们直接在我们这个粘制定位里边来来演示它啊，来演示它年制定位，我们直接给它打开啊，直接打开好打开以后呢，现在这是我们打开我们这个粘滞定位，那现在我们这个导航条啊，它是会随着我们屏幕滚动的啊，比如说我给body呢，加一个hi body啊，我们直接给它设置一个hat hat我们来一个3000，目的就让它出滚动条，出来滚动条以后，这时候你拖动滚动条，这个导航条会跟你的网页一起滚动，那比如说我希望什么呢？哎，我希望正常情况下，你这滚动条你这个东西可以滚动，但是什么时候就别动了呢？哎，当你这个东西到了我这个屏幕的顶端的时候，你就别动了，那这个时候我们就可以用一个粘制定位啊，粘制定位，所以呢，这里边我们这个导航条就是一个navy对吧，在我们这来说，我们叫做一个年制定位，年制定位啊，年制定位我们这是一个position，叫做一个这个。

CK啊CK这叫做一个粘制定位，当我们这个元素的这个position属性，哎设置为我们这个stick，哎则开启了我们这个元素的一个粘制定位，啊，则开启了我们这个元素一个粘制定位，那粘制定位什么效果呢？哎，那什么首先说啊，我们这个粘制定位它和我们这个相对定位的什么呢？定位的一个特点基本什么呢？基本一致啊基本一致，但是什么呢？哎，我们的年制定位，但是不同的是不同的是我们的这个制定位它可以什么呢？哎，可以在我们这个诶元素哎到达某个这个位置时，将其什么呢？将其固定啊将其固定什么意思，现在看这了，我们。

在这个position设置了一个stick，然后在这儿呢，我给他来一个top top0 top0，那这个时候什么效果啊，TOP0，那这个时候我们来看效果啊，来看效果现在刷新你跟这滚这都没有什么问题，对吧，都没有什么问题，但是当我滚的距离比较大的时候，你要注意了啊，看着往上滚，往上滚往上滚。看现在还动不动了，它是不是就不动了，哎，也就是说它就固定到那个零的那个位置，就不会随着你这个东西去一起去滚动了，所以这就叫一个粘滞定位，就好像什么呢，我在这儿抹了胶一样，抹了胶以后呢，当你滚到这儿，碰到这个胶以后，它就自然而然就就不动了啊，这个叫做一个粘着定位，当然这个距离你可以随便调，比如说你调一个100像素，100像素它就会直接就。

固定在这儿了，因为它本身上面是不是有一个距离，就是100像素，哎，所以它就直接固定了，所以这个就是一个年制定位这么一个效果，换10吧。欢十，你看上边是不是会留十这么一个距离啊，哎，所以通过年制定位呢，可以把我们一个元素固定在某一个位置，那它参考的这个位置，它相对于谁呢？这十个像素也是相对于它的包含块，那对于他来说，它的包含块其实就是那个bodyy，因为它不是那个相子定位，所以它就是相对于bodyy，所以这个是固定在我们这个包那个零的位置，它就不动了啊，是这么一个效果，所以这个年制定位呢，我们就不多说了，这里边我们只是演示一下，真正我们要做的时候，一般情况下我们也不会采用这种方式，为什么呢？因为我们说了它的兼容性不好，不能兼容所有的浏览器，所以一般情况下，如果你在PC端去做的话，你IE的话，你你多少你也得去兼容一下，你要用它的话，IE就不灵了啊，所以这个时候我们就了解一下颜值定位，哎就行了，这个东西不多说啊，你也是不用去过多的去去去去理解这个东西，后边我们遇到的话，我们要做的话，我们还是得结合这个GS去做啊，GS去做好我们。

等一下。