10.尚硅谷_css2.1_解决ie6底下fixed失效问题.wmv原创

讲了讲了定位，上午下午讲了定位，可是好像有一个定位我们没有提到fix是不是啊，固定定位的爆含块是谁啊，大家想想。就不要去想它的包含规则，他参照谁来定位的。那是绝对定位吧，绝对定位是不是干嘛？如果没有，没有定位的负极是参照四川道的矩型呗，是不是叫初始方块呗？固定定位呢？记住包含块的概念就是定位，去找参照物的时候，只有决定定位是去找包含块的。能不解啊，其他的定位都都是找什么啊，你像相对定位找到它的直接负极嘛，不不啊不相对定位找到它原来的位置嘛，是不是不是找到它波含块吧，它的波放块是它什么？相对定位的波块是不是它的直接负极啊，可是相对定位的这个定位形式参照于谁？是参照于它原来的位置啊，只有绝对定位的这种模式，它参它定位参照于谁，参照于它的包含块能理解啊，好的fix定位参照于谁啊？

Fix也不是参照于它的不好看，参照谁参照于真正的思考能理解啊，那个就叫思考跟初始观化是不一样的东西，懂吗？好，可是我们来看一下fix这个定位，它有什么问题。好，我们之后会讲移动端，说了移动端特别难啊，讲移动端时候概念特别多，所以前期大家干嘛不是前期。前期大家得干嘛得学学好啊好fix它有一个什么什么，他有一个什么问题呢，比如说我还是叫test好呃，来style。为零，也为零，OK，找到这个test OK y为100PX，为100PX，因为定位这个属性比较重要，放到引航线。

好没默认不给那个top的话，默认指示啊。呕吐是不是啊，比如说我现在给个零那干嘛，呃，给个。嗯，五十五十吧，好，LEFT10TOP也为50是不是好，我让他出滚动条，呃，怎么出滚动条给给玻璃来个干嘛ST然上面来个什么高度为。1000PX吧，就应该要出滚动条了啊，稍微大一点吧，2000PX好，应该就要出滚动条了，这里。好，出了滚动条之后，元素在哪边？没有背景好来什么颜色？走，你是不是啊，好，这是不是我们的固定定位啊，好像没有太大的问题，是不是好来看一下火锅里面。

走，你。好，也没有问题，是不是OK再来看。IE里面IE的高版本OK，没有什么问题，是不是F12进来。IE10好，没有没有问题，好IE9。没有问题啊一八。没问题，好I。没问题，好看我们的老祖宗I16。好，看一下IE6老祖宗啊这个。走，你。Ctrl a ctrl v，好。来看这五五十拼音量有啊。有固定定位吗？好，Fix是不是在I6底下会失效啊，虽然说这个问题以后不需要大家去处理了，可是里面一些技术点你们得知道，知不知道现在再让你金融IE6的话，你给我打它能明白吗？IE678一般我们都不考虑了，为什么？因为现在整个金融不管是金融平台还是政府平台，他们的机子都已经干嘛从一开始的这个可能还有九七啊，2000啊吗？从这种平台的机制干嘛已经全部提到叉P了，能明白吗？所以说I1678的这个介容性问题已经什么并没有之前那么大了，而且他知道之前是不是出过一个病毒啊。

是不是出过一个叫什么病毒忘了，因为这个病毒是不是黑了很多商业的一些服务器啊，因为银行怕这个事情。就是因为这个病毒的出现，他们才全局的提升了自己的操作系统，从原来的2000可能提到了差P啊，这个病毒的出现帮我们前端工程师解决了很多问题啊，解决了IE的一些兼容性问题，所以说对你们来说是一个好事情啊。好，那我们来看一下，如果要解决怎么解决。好，来看一下首先我们得知道的事情。好。

滚动条。好，看一下滚动条，嗯，好就这样写的比较写简单一点吧，好，我现在给个style，给个这样吧，我下面整个元素吧，好吧，我这边整个元素div，好我写内敛了，我就干嘛稍微简单一点，来一个调，我让它的hat为。1000PX能不能撑出滚动角了？是不是可以可以称出滚动条了？问题是这个滚动条在谁身上？不。还没？大家有没有想过这个问题啊？这个滚动条现在出来了，到底在谁身上？Body，你说body你你你负责吗？是不是你要来干嘛，一定要有这种好奇心干嘛测一下嘛，怎么测，你给HTY描述什么，描个框是不就出来了？好，H就可以黑色吧，再给我的body干嘛也来描个框嘛，DPX实行什么粉色嘛，分别给他们什么？

Market嘛，那这两个元素是不是就出来了。好看一下。滚动条在谁身上？在玻璃身上吗？在H身上吗？在H上一层吧，我们叫。怎么没了？今天发生了好多诡异的事情。好，这叫什么？HTML的上一层一般我们叫它文档有你讲好来看一下，呃，比如说现在我这样来做个操作，比如说我如果让这个HTML的head为百分百，问你这个值拿的是多少。

He为百分百，百分比拿的是谁的包含块的过度吧，好，HT表是不是跟标签啊，跟标签的包含块是谁啊？跟标签的包含块是初始包含块，初始包含块是一个视窗大小的矩形，这个看着应该拿多少。视口的高度吧，那么讲OK，那这个你看这个刷一下，其实我们整个，因为它现在有马嘛，是不是啊，我把这个马给它干掉。那是不是跟我们是口是一样大的。有没有看见好，OK，走HTL是吗？那我这边body我再拿一个百分百，好，这是不是body璃HT都是拿四场大小是不是，那这边我们最好拿这个四口的80%可不可以啊，那是不是我们就看到这样一个状况了？能理解吗？里面是玻璃，外面是爱妈嘛，可是问你，如果你没有这一层，我害得直接去拿这个百分百。

他能拿到吗？拿不到为什么？高度是不是靠内容撑开来的，你必须给我一层一层的继承下来，懂不懂，你这个时候你去继承H里面高度，它有高度吗？没有，还是靠玻璃的内容给他。来来看一下好像。哎，刷一下。看一下这个高度。来中。刷一下好看，这个H里面有没有高度啊，H面高度是从哪来的？哦，你看是不是靠里面的这个内容撑开来的，你看里面内容高度是是1000啊，撑了body body上是不是有30MARKET啊，最终撑到S秒，什么10648，你看我这个还的百分百拿着我这个玻璃拿的是四口的高度吗。四口的高度为多少？肯定没有1000的嘛，能不能理解啊？就是说你单独如果只写一个汉数百百干嘛，什么都拿不到，懂不懂这个东西很重要，以后在做移动的时，我们经常会用懂不懂高考清楚，你如果想拿四口的高速的，你想让博S里秒四口三合一的，你必须干嘛？一层一层的给我继承下来，能明白吗？这个时候你看一层层的继承下来，看玻璃的大小六百38 H码大小六百38，四口的大高度就是638，能明白吗？OK，大家看我拉一下吧，你看四口的高度是不是六六百三十八。

是不是啊，好，所以说你想让佛点HTL是口三合一高度，必须给我一层一层给我继承下来，懂吗？好，而且我们说现在大家看我们说这个滚动条它都不在玻璃，哎，什么身上，在文达在什么文档身上吧，好，如果我这个玻璃这边有一个欧弗洛维。Hidden，嗯，先不写hidden，如果我这个over为，那是不是说明玻璃身上得出个滚动条，因为你玻璃底下有一个元素超过我的大小了，超过我的高度啦，那我玻璃是不是应该要出现滚头条看一下刷一下。

玻璃有没有出现滚动条，没有，如果我给这个HTML也是一样，那是不是这个HTL身上应该出过滚头条好看有没有出现滚头条也没有好，最终玻利H如果身上都有罗斯看一下。玻璃上有没有工程条？有好，告诉大家浏览器渲染渲染的一个规则，什么规则？如果HTML跟body只有一个有over属性，而且是over威斯的，就是保底跟爱奇秒，只要有一个over属性，这个欧属性会作用给。文档。不管你是写在谁身上，最终作用给文档懂不懂？好，如果你博璃身上offer的属性都写了，HTML身上的是永远作用给文档的，能明白吗？玻璃身上会作用给。自己懂不懂就随便你要只要只要你写一个这个O属性永远作用于。文档，除非你两个都写，两个都写的情况之下，玻璃身上的作用给点，H码身上的作用给。

文档，那么讲好这个东西有什么用呢？好，我们经常开发要干一个需求，叫禁止系统。滚动条。好，移动端比较多，好禁止。为什么要禁止，禁止这个，呃，禁止什么系统的默认滚动条哒，想一个场景，你们在玩手机的时候，在那边滑屏的时候，你们能看到滚动条吗？滚动条是长这个样子吗？肯定不是，移动端的滚动条就是一个小块，就是一个div，基本上移动端所有网页的滚动条都是自定义的，所以说你要把系统的给它禁止掉，能不能理解好，那这就是我们什么为什么要出这个需求，好那怎么去禁止啊，我问你，如果你在这个H身上好给他干掉。

这个也给它干掉好，如果你在HT身上写一个问你啊，这个had是作是作用给谁的。文档的上一层吧，那这个时候问你，你哪怕里面这个元素再高，文档上面会给你出滚动条吗？O叫什吗？有滚动条吗？没有，除非你干嘛O是四是go的才会给你出出滚动条吗？能理解吗？好，那家看好，如果在玻璃上面来个欧拍的，能不能进止系统共同？如果H跟玻璃只写一个O属性，这个O属性作用给谁啊？文档，那文档还能出混能调吗？黑灯调了吧，粗吗？不粗吧，所以说一般我们禁止系统滚动条，你不管是HT码还是玻璃上面写个o head就可以了，懂不懂？可是我们一般的写法我们不这么写，我们会怎么写呢？我们会这样写，哎，没玻好，首先让他们俩的高度统一同步成百分百，让我这个玻璃充当视口，充当视口的一个大小能明白吗？好，因为你玻璃是个快元素嘛，外是不是拿着百分百，那就拿着是口的宽嘛，还得百分拿什么是的高度嘛，然后再把系统了给他。

禁掉，好，那这是我们一般禁止系统滚动条，经常看这个代码懂不懂，这两行代码就在禁止系统的默认滚动条，OK，好，那这个东西跟我们讲的这个fix啊，它有什么用，大家想想你现在这个fix是不是在I6底它没有办法去用啊，想想为什么大家想。再想想，呃，我决定定位跟固定定位在什么情况之下，他们俩是不一样的。出现滚动条的时候，他们是不是不一样的？如果没有出现滚动条，我问你啊，Fix的定位跟呃不是定位一不一样。

一样的吧，因为你拉滚动条的时候，Face定位会会跟着走啊，啊不是face定位是会在那在那边不动嘛，啊不所有的定位它会干嘛跟着走啊是不是，那你想想，如果我把系统滚动条给禁止掉了，那是不是固定定位跟相对定位就是一样的。能理解吧？好，那我们来写一下。16。好，16好怎么办？我们说什么？使用决定定位。使用绝对。定位。来模拟固定定位，好移动端都会这么去做啊，所以说我们先把这个东西在什么第一节课给讲掉，好怎么办呢，我还是把这个东西贴过来，贴一份过来，Ctrl a ctrl b好周。好，呃，怎么办？好，先把他这个给干掉啊，上来做一件暴力的事情，把这个market pen给它清掉，Market为零，Pening也为零，好，统一给它清掉好，清掉之后我们来看现在是不是用这个div来撑开高度的，好，嗯，那好，我在上面再来个div，好，这个D给个ID叫test好，这个test我给大家稍微画一画，来一个test好，Y为100PX好，Hat也为。

100PX为absolute。Today为呃，不是，Left为50为不不，Top为50，好，给他一个背景，Background为拼，好来看一下页面，好，现在出现滚动条是因为我这个底下有一个很高的元素，是不是只是它没有宽度而已，明白吗？好，大家看现在我是不是一个绝对定位啊，为什么我拖滚动调整时候这个绝对定位比数会跑啊？

为什么拖滚动条的时候，这个绝对定位的元素会跑啊？这个时候决定定位是参照于谁来定位的？谁初始包含块吗？初始包含块默认是不是在这款。是不是啊，为什么拖这个滚动条它动了。说明你拖滚动条的时候，初始包含块是不是移动了。市口有移动吗？市口是不是永远是这个市口？是口有动过吗？没有好告诉大家一件事情，你拖系统滚动条的时候，整个初始方块是会被拖走的，这样的话你的绝对定位才会干嘛决定的，这个元素才会跟着走啊，因为这个绝对定位元素不是只参照于什么。初始包含的定位档，你包含快动了，这个元素动不动。不也动了吗？是不是啊，那想一想，如果我在滑滚动条的时候，这个初始方块不动的话，那我现在这个定位是不是就是一个固定定位。

能理解吗？好，告诉大家，只有拖系统滚动条的时候，才有可能把这个。初始弯骨拖动，你拖任何一个元素生产的滚断条是没有办法拖到。初始斑块了，因为初始斑块在最外层，你想想你托玻璃产品的包含块，初始斑块可能动吗？你托玻璃身上的这个滚动条影响的是不是玻璃里面的元元素啊？那我这个初始外环是不是在玻璃的外层啊？那你说它有可能把出水关环给拖动吗？拖不动嘛，那怎么办？那就好办了，首先我把这个滚动条给他禁掉呗，怎么禁掉，哎，请听没。干嘛over黑的？其次呢，为百分百是不是OK，这个时候是不是条被我们记掉了，然后怎么办？

好，Body玻璃干嘛，这个选择器的运行是不是要比它大，玻璃上这个O属性是不是要重新制成什么？呕拓，看你玻璃底下内容吧，比我高的话就是比我，比我比我矮的话干嘛不条嘛，那么讲，那最好把玻璃给他分开来写好这个he干嘛？是不是这边要要来什么指定方，好来看一下走，你刷一下有没有滚动条，这个滚动条是在谁身上的。你看伯利身上有欧属性，HT妙身上也有over属性吧，HT妙身上这个over属性作用的文档，伯利上这个欧欧属性作用给啊自己，那这个滚轮条是谁的玻璃的，你看这个时候是不是一个固定定位。可是我有写任何固定定位的代码吗？

没有，为什么现在是个固定地位，你拖的是玻璃的滚动条，初始外块动了没有？初始班会没有动这个东西动不动？不懂能明白吗？也就是说以后在画页面的时候。如果fix有问题，你有没有解决方案了？有，而且移动端的固定定位都是这么写的，都是通过决定定位来模拟的，能明白吗？除非是一些比较大屏的元素，你可以直接使用的啊，这个以后来讲好不好好，那到这一块是不是使用了固定定位啊，使用了绝定定位来默认固定定位啊，看一下I这个时候还行不行。好，来一下教你。有没有问题啊，是不是一个固定定位了，I6提加的固定定位有没有出来，出来了吧？好，这是我们对初始包含块的一个进阶使用，能明白吗？OK，那到这一块我们讲什么，IE6体是什么，如何去解决。如何去解决I6底下这个固定定位失效的问题吧，是不是好？今天我们讲了很多东西啊，讲了什么？讲了三点布局，讲了怎么去解决固定定位失效的问题，是不是好？这两个东西以后开发当中还会这么去做吗？其实你们用到的概率不大，可是三略布局跟我们刚刚讲的那个解决固定定位里面的每一个技术点都至关重要，以后写布局的时候我们都会用到，懂不懂说我们不是为了讲三月布局，去讲三略布局也不是为了啊我要解决L加这个固定定位这个问题，才来讲这个什么解决方案，我们是为了讲里面的这些技术细节，明白吗？这些系数细节要给他整理出来，OKOK。

好，那这个视频先停吗。