尚硅谷前端基础 (71)

好，那么接下来我们来说我们的下一种定位，来零三，我们叫做一个固定定位。呃，固定定位的话，我还是把这代码粘过来吧，呃，当然这个固定定位呢，我们来把这个这玩意儿我先给它去掉，然后呢，这都去掉。呃，变成一个我们最初的那么一个状态啊。哎，是这么一个啊，这是一啊二三，然后呢，二有复元素五，五有复元素四，他们是一个，诶三个人是吧，这么一个关系，那这时候我们还是在二这做演示啊，我们叫一个固定定位，固定定位哎固定定位我们来说一下，我们将什么呢？将我们元素的posi t position属性设置为我们叫做一个fixed啊，Fix则开启了我们这个元素的一个固定定位，何为固定定位啊，那注意了，哎，其实呢，哎，固定定位它也是一种什么呢？也是一种绝对定位啊，也是一种绝定位，所以啊，所以注意固定定位的这个大部分特点都和我们这个绝对定位一样，都和这个绝对定位一样啊。

大部分特点都跟绝对定位一样，所以其实我们在称说的时候，也一般的话，其实就是说有两种定位，哎常用的两种定位，一个叫相对定位，还有一个叫做绝对定位啊固定定位可以说是一种特殊的绝对定位啊，所以它的大部分都和绝定位一样，那比如说啊，我来写一个，我直接写一个啊position，我们来一个这个fixed啊fixed直接一整，哎你看是不是是不二位置没有发生任何变化，哎也是一样的，但是你说老师他他他他他他怎么没脱那个挡流啊，哎脱了啊脱了，因为二小没东西嘛，你看不见，我把这个三写这啊把三写这啊，我现在把固定关着。

三是不是在这儿呢？哎，三在这儿呢？三是不是等于溢出了，哎当我给它开启固定定位以后，三就上去了，为什么三能上去，就是因为二脱离文档瘤了啊，脱离档流了，好，我把三放回去啊，那这个时候你看也是也会脱离文档流，同样元素的性质也会改变啊，内敛航天元素变成跨元素，跨元素的宽度高度被内容撑开，二一个也是不设置偏移量，位置不会发生任何的变化，哎所有所有的特点都是一样，包括提升层级都是一样的，唯独有一个不同点，所以我们这关于这个的话，我们就不用说这些，哎一样的地方我们就直接说不同的，唯一不同的是，唯一不同的是我们的什么呢？哎，我们的固定定位它永远什么呢？诶永远参考于什么呢？永远参照于我们的这个。

诶叫做浏览器的一个视口进行定位啊，浏览器的视口进行定位，提到一个新的概念，浏览器的视口，那之前我们说了，我们说的是绝对定位是参考与我们的包含块进行定位的，而我们的固定定位是参考于视口的，那这里面什么是视口，那我们还是我们先看看它的原点，我们直接LEFT0 right0原点。哎，比如说RED0应该是我们的BOTTOM0对吧，BOTTOM0，哎哎什么玩意儿TOP0啊，TOP0这个时候是跑到和这个位置了，哎，也就是说这原点在哪？原点也是在我们这个浏览器的左上角，那这时候同学看到就会说，诶老师你这个写的好像好像跟那个绝对定位是一样的呀，哎，注意了，不同点来了啊，不同点来了，如果是绝对定位，现在呢，我给BOX4我开启一个相对定位，那这个时候他是不是应该参考于包括四了，但是现在看有没有用。

没用啊，没用，为什么没用？就是因为它总是相对于视口进行定位的啊，总是相对于视口进行定位的，那这个时候同学就纳闷了，诶老师，什么叫视口啊？视口简单说它就是我们浏览器的可视窗口，那像这个窗口，这个窗口就属于什么呢？就属于市口，但是你可能这么看，你会觉得这个市口跟什么呢？跟我们那个初始包含块，我们这个根元素HTML似乎是一样的，但是注意视口跟那个根元素它不一样，视口是什么？我们每一个网页，我们去显示的时候都要在浏览器里显示，对吧？浏览器里显示我视口的大小是固定的。

视口，比如说我这个视口就这么大个，那这个视口的大小是固定的，而我们网页，我们那个HTML它是不是属于网页呀，网页的大小是不固定的，它可能长可能短对吧？哎，可能长，那假如说我网页长的话，哎呀，这个颜色太冲了啊，嗯，换一个柔和一点的。哎，假如说我网页是比较长的话，那这个时候注意我视口的大小是不会变的，视口给它挪上来，视口的大小是不会变的，那我们怎么去查看完整网页呢？我们是需要通过我们滚动条来滚动来查看完整网页的，所以这个时候注意视口什么特点，视口的特点就是固定不动，就是固定不动，所以这个时候我们的BOX2它是参考于视口进行定位的，所以那也就意味着BOX2也是固定不动的，所以如果说我给我的包Y设置一个高度，给body底设置一个高度，我来一个高度是一个2000，这个时候我们这儿是不是就有一个滚动条了，哎，滚动条了，如果你这用的是一个绝对定位a salute，这时候你看效果你看啊，它实际上会跑会跑，为什么会跑呢？因为网页在动嘛，它会。

跟着往下动啊，跟着往下动，但是如果你是一个fix的，这个时候你定位是参考于谁，参考视口定位的，视口是不动的，所以这时候你看这个元素干嘛了，是不是就定到这个位置了，哎，所以这个就是我们的视口和一个包含块的一个区别，视口定位它会固定在我们的这个位置啊，固定定，所以叫固定定位啊，所以叫固定定位，所以这个时候注意我们固定定位的元素，它不会随什么呢，随我们这个网页的一个滚动条滚动，它就说白了就干嘛了，就定在那儿了，定在那儿了它就不动了啊，就这么简单啊，所以这个叫做一个这个固定定位，那这个可能我们经炒见的话，就是一些这种广告，对吧，广告，或者你看一些网站，比如说京东，京东你看啊。

我给你托大点，它这有一个这么一玩意儿，你看。你看这个玩意儿，当往下滚的时候，它是不是在那固定着不动啊，哎，它并不会随着去滚动，包括这个上边，上面这个条它也是固定在这儿不动啊，所以这些我们都可以用这个固定定位去实现，总之固定定位主要就是为了把一个什么呢？把一个元素固定到我的视口上，注意视口就是什么视口就是我们这个可视区域啊，这个区域，这个区域它不会因为滚动条的滚动而滚动，它是固定的，所以叫固定定位，然后剩下的其他特点都和绝对定位是一样的，不再多说了啊，我们来填一下。