69.尚硅谷_HTML&CSS基础_相对定位.avi原创

那那我们来继续来说我们今天内容，今天呢，我们又说了一个，我们要说一个关键的一个内容，我们来一个day，一个007，诶我们昨天讲了一个这个，昨天还有这个周三的时候，我们讲了这么一个浮动，今天我们要说一个也比较关键的叫一个什么呢？叫一个定位啊这个定位我们先说第一种，我们叫一个什么呢？叫做一个相对相对定位，那定位什么叫定位，诶什么叫定位，我们来先写一下，写个页面啊，直接来一个div，诶div我现在干嘛呢？我想创建三个盒子，三个盒子什么呀？BOX1 box2 box3，我之前怎么创建的呀？Div点一个BOX1TABLE，然后div点一个BOX2，是不是table啊，诶其实在我们这工具里边还有一个比较简单一点的方式，怎么写呢？诶我是不是，你看我这类是不是都是BOX1BOX2BOX3这么是不是都是box几这种结构啊，我可以这么写，直接来什么呢？Div点一个什么呢？Box，然后写什么呢？Dollar符啊，然后写Dollar符，我再。

解什么呢？星号一个三啊星号一个三，那这什么意思？那星号在我们这个语言里表示什么呀？乘法哎三表示什么呀？乘以三，也就是说我要生成这个三个这个元素啊，诶这刀符表示什么呀？这刀时表示就是从1231个一个一个变，第一个就是一，第二个就是二，所以写完这你table走你诶是不是BOSS123是自己给你创建出来了，哎你要写什么样，你要写30呢。是不生成30个呀，诶这是一个简单一点的方式啊，简验方式，那我们这块就不要30个了，我们来三个就够了啊，BOSS1233个元素，那接下来我们来写一下这三个元素的一个样式，直接我们这来一个带标签，我们来干嘛呢？点一个BOX1 box一来一个，来一个200个像素，Hat也来一个200个像素，然后呢，我们来一个background color来一个这个red，诶这是一个，然后复制几个。BOX2S3也是200这个颜色来一个这个yellow，这个颜色来一这个yellow green，诶是不是改成三呀，来保存，现在我们这改完了以后呢，我们现在这个是一个什么效果，是不是垂直排列的三个盒子呀？诶垂直排列的三个盒子，那这里边我们来打开浏览器看一眼。

1233个盒子对吧？好，那现在我们要做一件什么事呢？诶我们发现什么呀，哎有这是一，这是二，这是我们这个三，我现在想干一件事干嘛呢？我想把二这个盒子吧，我想让它位置干嘛呀。变一下，哎，或者幻想说我想把这个二干嘛呀，挪三。右边来，诶，我想把这二呢往这儿挪，那现在这个功能我们能不能做这个东西想想，哎，那我们要把二挪到这儿来，其实我们可以分解一下这个动作，我要把二挪到三这儿来，我一想，那我其实要分两步，第一步呢，我先把它挪开。

挪这里是吧，挪完这里以后再干嘛呀，我是不是再往再往下挪呀？哎，那也就是说现在我们第一件事，我是不是要先把我这个二往右移多少个像素啊，是不是200个像素啊，哎，我需要把这个BOX2往右移200个像素，那这玩意能不能移？诶我们是不是给他设置一个marin left就往右走了呀？哎，咱们试试。来我们要移动的是box，二来设置一个这个margin，哎，Left直接来写了啊margin left往往右移，直接来什么呀，200个像素，哎，保存，诶为什么200，它的宽度是不是200啊，诶移动200移动移动它的一个宽度，我一刷新走你诶很好，是不是跑这来了，诶跑到这儿来了以后呢，接下来我想干嘛呀，我是不是需要又把它往往下移啊，诶那你想往右移，我用in往下移用什么呀？是in top呀，那in top再移多少啊？是400吗？是不是还是200啊，你注意啊，我这个相当于谁啊，是不是相当于他啊，哎，还是200啊，还是200，所以这里边我们再设置一个这个marin top。

能理解为什么是200吗？哎，这么写你可能不理解，我把这个宽度啊，我不设置200把一让他宽起来，这能理解了吧，它在8TOP是跟谁算的呀？是跟BOX1算的吧，哎，跟BOX1算的啊，BOX1是个块元素，它不是跟这算的，你要跟这儿算是400，但是它是相当于什么呀，这红字算的啊，红这算的，所以一定要注意啊，来咱们给它改回来，好设置一个marin top来一个什么呢？Marin top来一个这个200个像素，那是不是应该再往下移200啊，但是它能不能达到我们想要那个效果，来我们一刷新走你诶挺好，黄的是不是到达了我们想的那个位置啊，但是发现什么问题了，绿的是不是又下来了？哎，绿的又下来了，那我们说了，那这这这不对了是吧，我们需要绿的，你动不动啊，不动你是不是还跟这儿啊？哎，还跟这那怎么办呀？哎，我一想，那我把绿的在干嘛呀，我提上来行不？

行啊，行不行，哎我能不能把它提上来，先说能不能，哎我想把它，我想把这个元素往下移行不行，是不是设置marin top呀，那我们marin top是正值，它是往下走，那我们marin top要是负值呢，是往上走啊，诶行不行啊试试来我们来干嘛呀，设置我们这个BOX3的一个什么呀，Mar top，诶Mar top我们先看效果啊，来一个Mar top，我来什么呢？来一个100个像素它干嘛了，是往下移啊，诶那我要负100呢，是不是上去了呀？诶那我要付200呢，保存一刷新是不是上去了呀？诶现在他们是一个什么结构呀。

现在是我这个BOX2是不是压着我这个BOX3的呀？诶或者说它俩是干嘛呀，它俩现在是一个重叠的了，诶它俩是一个重叠状态，也就是说我实际上我通过这个marin，我可不可以达到我们这一个目的啊，完全可以吧，哎完全可以，但是发现有个问题，什么问题是不是有点麻烦呀，我想移动的是谁啊，我移动的是二，但是我发现我移动完了以后，我不得去修改我们。爆个三吧，那我希望的是什么呀？我希望我移动爆个二，你爆个三，你是不是别动啊，哎，我动他的你跟你没关系，你就别动了，对吧？我们希望的是这么一个效果，所以这里边注意，虽然通过marin可以完成这么一个功能，但是实际上它完成起来干嘛呀，它并不是特别的好啊，并不是特别的好，那这里边儿我们需要干嘛了，那我就不能用marin了，我给它去掉保存，那我们要怎么办呢？那就需要用到了什么呀，用到我们这个定位了，需要用到我们这个定位了，那什么叫定位啊。

什么叫定位啊，哎，我们说定位指的，哎就是定位是吧？哎指的就是什么呀，就是将我们这个什么呀，诶指定的元素干嘛呢？摆放到我们这什么呀？诶页面的一个什么呀，任意位置啊，就是将我们这个指定的元素摆放到什么呀？哎页面的一个任意位置，什么叫定位啊，我说哎我说谁谁谁你给我站，那我是不是把它定位到这儿呀？哎谁谁你给我站那儿，我不是把另一个人给他定位到那儿来呀，所以这里边我说什么呀，我想把这个BO42这个元素干嘛呀定位到。是不是这啊，哎，定到这儿，这叫什么呀，这就叫定位啊，这叫定位，那这里边我们来说一下，我们要怎么给元素去什么呀，去定位，那注意了，定位是一个比较，哎比我们这个浮动更强大的一种布局方式，那我们说什么呢？通过定位可以什么呀？哎，可以任意的什么呀，任意的摆放我们这什么呀，元素说白了这个元素干嘛呀，你想把它放哪你就可以干嘛呀，你就可以放哪啊你想把它放哪你就可以放哪，那我们来说，那我们怎么去设置定位啊，诶那么说通过什么呢？通过我们这个哎，Position属性来干嘛呢？来设置我们元素的什么呢？定位啊，通过position属性来设种元素的定位，那我们直接来看一下我们这个position属性，打开文档W3SCHOOL离线手册HTMLH这个ML，我们这个CSS往下找我们这个参考手册，诶我们搜索一下哦，这。

哎，就叫position啊，你看它一堆position是吧，但是我们找的是什么呀？就是单独的一个什么呀，Position，你看position的作用叫什么呀？规定元素的定位类型啊，规定元素的定位类型，点开它，我们来看看它的值啊，首先继承性是no，换句话说它是什么呀？它是不会继承的，然后默认值叫什么呀？叫static static什么意思呀？诶静止的叫静态的什么意思呀？也就是说默认我们的元素它能不能定位啊，诶默认元素的定位是没有开启的啊，没有开启的，然后呢，我们来看它几个核验值，这有一个值叫static，我们说什么默认值叫什么呀，没有定位元素出现在正常的什么呀，流中，说白了它就在什么呀，文档流中没有去定位啊，没有定位，然后往上看，有一个值叫做什么呢？叫做一个relative relative表示什么呀？生成相对定位的元素，还有fixed，还有一个叫什么呀？阿，UT叫什么呀？

生成绝对定位的元素，这两个都叫什么呀？绝对定位fix的还有一个名叫什么呀？叫固定定位啊叫固定定位，我们会发现我这个定位要用的值是不是只有这几个呀？哎，那接下来我们来分别说一下这几个值是啊什么意思啊，什么意思来说一下它的这个可选值，可变值，刚才我们看到一个值叫做stac，叫做一个什么呀？Static这是什么呀？默认值什么叫默认值，哎，就是说你不设置是不是也是它呀，叫什么呀？元素没有开启定位啊，元素没有开启定位，然后还有一个值叫什么呢？叫做一个relative叫什么呀，叫做哎，叫做开启我们元素的一个什么呀？相对定位啊，开启我们元素一个相对定位，然后再说还有谁呢？还有我们这个阿巴，诶，阿巴salute，阿巴salute叫什么呢？开启我们元素的一个，这个绝对。

定位啊，开启我们元素的一个绝定位，还有一个叫什么呀，Fix，哎，这叫什么呀，这叫开启我们元素什么呀？哎，固定定位啊，固定定位哎，那注意了，固定定位它也是什么呀，也是绝对定位的一种啊，也是绝对定位的一个一种啊好，那我们来分别说一下这几个值什么意思，那我们先来说谁呀，名字已经写上了，我们先来说谁呀？相对定位啊，我们先来说相对定位，那现在我们来说默认值叫做什么呀？Static，比如说我这个position，诶上来值是不是就是static呀？哎，所以我这写不写static是不是没什么区别啊，哎，所以我们就不说static，直接来说什么呢？我们的这个relative来relative，哎，那relative表什么呀，叫做相对定位，当元素的这个position属性设置为什么呢？设置为我们这个relative时，则什么呢？则诶开启了我们元素的一个什么呀，哎相对定位。

啊，则开启了我们这个原路箱定位，那现在来看我给谁设置了。说BOX2啊，诶BOX2设置了relative，那我们现在来看看，我设置完这个relative以后，BOX2有没有什么变化啊，有没有什么变化来现在我直接一刷新来走你，诶包括他是不是他呀，哎，我这一刷新走你走你发现什么了，是不是没有变化呀，哎没有变化啊，所以这里边我们要注意，我们要说一下我们的相对定位的一个特点，当什么呢？当开启了我们元素的这个什么呀，相对定位以后，而什么呢？而不设置偏移量式什么呢？我们的元素不会发生任何变化，所以你这只开启了一个相同定位，对于我们这个元素来说干嘛呀，是不是跟没开一样啊，诶它不会产生任何的变化啊，不会产生任何的变化，这是我们说一个特点，诶那问题来了，那你这既然不会产生任何变化，你开启它还还干嘛呀？

诶开启它干嘛呀？哎，那我们是不是需要去设置它这位置啊？哎，来我们来说一下，在下边说当什么呢？当开启了我们元素这个定位时啊，什么叫开启定位？我再强调一下什么叫开启定位，诶开启定位就是我们这个position属性值是一个非诶static值，哎也就是说只要你的position不是static，你是relative，你是AB，你还是fix，我们都叫你干嘛呀，开启定位这三个值都叫开启定位，但是static嘛呀，不叫啊，Static不叫，只要你的值不是static就叫什么呀，开启定位，那现在我们值是不是死在这个不是它是不是开启定位了呀？哎开定位，那开启定位有什么好处呢？诶当我们这个元素的定位，哎，当开启了元素定位时，我们可以什么呢？我们可以通过什么呢？诶，Left。

Right pop还有什么呢？哎，Bottom干嘛呢？哎四个属性来干嘛呢？来设置我们元素的一个什么呀，位置啊，诶位置或者叫什么呀，叫做我们这个哎偏移，哎偏移量可能会更好一些啊设置我们元素的一个偏移量，什么叫偏移量啊，我们来说一下这几个值的一个意思啊left叫什么呢？叫做元素相对于其什么呀？诶其定位诶位置叫什么呀的左边距离，哎左边距啊元素枪相对于其定位置的位置的什么呀？左边距或者叫什么呀？左侧偏移量啊左侧偏移量，那同理，我们就用什么呀，Right叫什么呀，元素哎，相对于其什么呀？哎其定位位置的什么呀，右侧偏移量啊，右侧偏移量，然后还有什么呢？还有我们这个top，诶元素相对于。

点定位位置的什么呀？哎，上边的什么呀，哎偏移量，诶还有一个什么呢？还有一个叫做包臀叫什么呀，元素，哎相对于其定位位置什么呀，哎下边的一个偏移量什么意思，其实这个值有点像什么呀，有点像我们这个margin啊，有点像我们这个margin，我们说了，如果我给元素设置一个margin left以后，我们的这个元素干嘛了，是不是向右移啊，哎，向右移，同样我给这个元素设置left以后，元素干嘛呀，也向右移，那left什么意思呀？Left意思假如说就是什么呀，距离我这个左边是不是多远啊？诶距离我这个左边多远啊，所以注意设置left以后会向右移，那我们来看它会不会啊，我这来一什么呢？来一个这个left left来多少呢？我来一个随便写一个，来一个什么呀，100个像素啊，来一个100个像素保存，我们来看效果这块我一刷新走你干嘛了。

元素是不是向向右移了呀，哎，那也就是说哪段距离是100呀，哎是不是这一段距离是100呀，哎就是说它离左边是不是离开了100呀？哎，所以叫什么呀？哎，左侧的一个偏移量，哎左侧这块离开了一个100啊，这是100，哎那我们这块说了，也就是说我只有开启了定位以后，是不是才能设置啊，换句话说，假如说我这个值是一个static。

还行不行，我一刷新是不是没用了呀，所以注意啊，咱们这给你写着呢，如果什么呀？哎，如果我们这直是static，它要干嘛呀，忽略top bottom left，还有什么呀，Red，哎，它会忽略这四个值，所以如果你这是一个static，它这个值压根就干嘛呀，就当没看见一样啊，就当没看见一样啊好，我这改回来，那现在问题又出现了，我们来说啊，那现在我们说了，当我开启定位以后，我设置100PX，它是不是向右移了100呀，那问题就来了，我们说了你这个life叫什么呀？元素相对于其定位位置对吧？诶你要移动，你是不是得相对于某个位置去移动啊，我说了我向左，哎，我向左移动100个像素，我这么移动了，我是相对于谁移动，哎呦，这是右是吧？诶，向右移动100个像素，我是相当于什么移动的呀，是不是相对于我原来那个位置移动的呀，所以你这块要移动个100个像素，你得什么呀。

你是不是得有一个参照啊，哎，那我们说了，我这个元素的确移动了100个像素，那问题就来了，它是相对于谁去移动的呀？哎，是不是相对于它原来这个位置向右移动了100个像素啊，原来位置跟哪来的，原来位置是不是跟跟这来的呀，我设置一个left以后，它是不是就移到移到这来了呀，所以注意它是什么呀，相对于它原来在文档流这个位置进行什么呀，进行定位的，哎所以这块一定要注意，所以什么叫相对定位，我们在这说啊叫什么呀，相对定位是什么呀？是相对于我们什么呀，我们元素是什么呀？哎在哎文档流中什么呀？哎，原来的什么呀，位置进行定位啊，进行定位，所以干嘛呢？这个LEFT100表示什么呀，我相对于。

原来的位置左侧偏移什么呀，100个像素，其实实际的效果就是什么呀，就是向右移动了什么呀，100，那现在我想给它移这来，那我得移多少是不是200呀？哎，我就需要相对于它原来的位置移动200，所以一定要注意相对定位，相对的是谁，相对的是它什么呀，自身的位置进行定位啊，自身的位置，所以这块我改一个改什么呢？改一个200，我一保存走，你是不是就出来了呀，哎，就出来了啊好，然后我们再说，那我还得干嘛呀，我我我什么要移这的呀，移这的移多少是不是也是200啊，那注意我这200是不是还是相对于它原来位置移200啊，原来位置跟这儿呢，我要向下移200，那我要设置什么，是不是设置top呀，哎，设置top啊，所以这里边我再来什么呢？来一个top来一什么呢？200个像素，然后保存我们来看效果走，你是不是就移下来了，哎，就移下来啊，所以这块一定要注意啊，一定要注意我们这这个偏移量的一个意思啊。

偏量一个意思，你可以发现什么呀，我设置一个LEFT200，一个TOP200，这元素是不是就下来了，而且你注意它下来以后有没有影影响到我们这个BO3没有啊，那这个就是我们这个一个什么呀，定位啊，这个就我们说的一个相对定位，然后呢，我们这里边再说一下一个问题，我们来看什么呢？还是看我这个定位，我们来看这定位它还有什么特点，还有什么特点，诶那现在注意我这元素是不是挪下来了，它挪下来以后。他这位置是不是空空出来了呀，他这位置空出来，但是你注意这个元素它上没上去，没有上去，没有上去，那这是为什么呀，证明它这位置还在不在，是不是还在呢呀，所以注意注意什么，我们叫什么呢？叫做相对定位的什么呀？相对定位的元素干嘛呢？不会脱离文档流啊，相对定位的元素不会脱离文档流，什么叫不会脱离文档流，为什么？因为它如果脱离文档流以后，它这位置是不是就没了呀？它这位置没了，后边元素是不是就应该拱上来呀？那现在这个位置还在，就意味着我们这个元素它干嘛呀，它并没有脱离文档流啊，并没有脱离文档流，所以这块位置实际上还是谁的，还是我们这个BOXS2的啊，还是我们这个BOX2的位置还在，这有点像什么呀，这有点像那个，你们举个例子叫什么呀，像那个人的这个灵魂出窍，什么叫灵魂出窍啊，我这个人的这个身体。

笔啊还在这儿呢，但是他的什么呀，他的魂在这个网页里拿呢飘呢啊就是有点有点可怕了是吧，有点可怕了啊，但是你说要理解一下啊，它这个文档流不相对定位元素呢，并没有脱离文档流，但是它它这什么呀，它这个诶元素啊，元素在这个位置可以去改变，但是文档中的位置还还会给它干嘛呀，还会给它保留啊，还会给他保留好那现在再来看一个问题，现在我们这个live的是一个200，然后改一什么呢？我改一个100。

改一个100。诶，那我们来说这是一个什么效果，改一个100以后开始偏移200是不是跟这呀，现在我值变小了，他不应该往左左移了呀，应该跑哪去了，是该。在这块位置，也就是说他们俩是一个什么呀，重叠的吧，那问题来了，那是黄的盖着绿的还是绿的盖着黄的呢？诶那我们说来直接一刷新走，你干嘛了，是不是黄色盖这个绿色了，那为什么呀？诶对，这个是我们说的一个相对定位的又一个特点，第四一个叫什么呢？相对定位会使我们这个什么呀，元素提升一个什么呀，层级啊，提升一个层级，换一句话说，我们这个元素实际上比我们这个文档里边元素干嘛呀，它稍微的要高一些，所以你会发现什么呀，我定位的元素它一定会盖住什么呀，文档流里的元素啊，定位的元素一定会盖住我们这个文档流的元素啊，这就是我们相对定位的一个特点。好，简单再回顾一下，当开启元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。换句话说，你设置完这个position。

我的top bottom right，你都不设置元素干嘛呀？哎，没有任何变化啊，不会发生任何变化，然后相对定元素是相对于元素在文档里原来的位置进行定位的，也就是说相对于什么呀，自身的那个位置进行移动的，还有一个叫什么呀，相对定位元素不会脱离文档流，第四一个叫什么呀，相对定位会使元素提升一个层级啊，这是我们说相对定位的一个特点，然后再来说这个left right top bottom，这是我们这个偏移偏移量，那你会发现这我只用了几个偏移量，是不是两个呀？哎，两个，那我们这里边来说一下通常什么呢？通常我们这个偏移量，我是不是说四个我非得全都用上，哎，往往不会这么用的啊，通常偏一亮干嘛呢？哎，只需要使用两个，哎，就什么呀，就可以对一个元素进行定位了啊，就可以对一个元素进行定位了，为什么使用两个可以定位了，哎，是不是。

我们坐标是不是都用XY定义这么一个点呀？诶两个已经完全可以定义一个元素的一个位置，那么一般什么呀？诶一般会选择什么呀？哎，水平方向的一个水平方向的一个偏移量和什么呢？哎和一个什么呀，哎和垂直哎方向的偏移量，哎来为一个元素进行什么呀，进行定位，那什么叫水平方向啊。

Left right是水平啊，垂直什么呀，是不是top bottom没呀，诶你可以用什么呀，你可以用left或者什么呀，Top，诶用left和top或者什么呀，或者left和bottom或者什么呀，或者是right top或者什么呀，Right bottom，总之一般情况下我们干嘛了，用两个值就足以完成什么了，定位了啊用两个值就足以完成定位了，好，那这个呢，是我们说的什么呀，这个是我们说相对定位的一些特点啊，一共四条啊给它总给它记住了啊，给它多测试一下，那接下来呢，我们再看一个问题啊，再看一个问题，再看一个什么问题呢？诶我们要看一下我们相对定位的元素以后，它会有什么变化，我们说了一个元素什么呀，浮动以后一个块元素浮动以后它的宽默认是什么，默认是不是被内容撑开呀，哎，浮动以后，那我们来看看什么呀，看看我们的这个相对定位会不会发生变化来，那现在我们BOX3的宽度啊，我给它去掉，去掉以后我这个刷新走你，诶咱们这样，咱们这个B3这。

还有点高，有点矮，咱们用BOX1测吧，BOX1我把这宽度给它去掉，我这一刷新走你，诶现在是100%啊，哎，100%全屏的这么一个宽度，那现在干嘛呢？我来给BOXS1开启一个什么样相对定位position，我们来一个，我一保存我要看什么，我是不是要看它这个宽丢不丢啊，哎，来我这一刷新走你干嘛了，是不是没有丢失啊，宽度是不是还在啊，哎，宽度还在，那么除了他们再看一个啊来给它改回来。这里边干嘛呢？我再加一个元素，加一什么呢？加一个SPASPA我来给他一个class，叫一什么呢？叫做一个S1，哎来我是一个SPA，然后我在这儿给SPA设置一个样式，点一个SS1，然后呢，我给他来一个外来一个200个像素hit一个什么呀，200个像素back一个color来什么呢？来一个这个yellow吧，保存现在这么一个S1，我这一刷新走你是不是出来了呀，但是你要注意它的宽高，起密作用没起作用，因为它是什么呀，内敛元素啊内敛元素好，我这来一个position叫什么呢？叫做啊啊叫做一个relative，保存我们来看刷新有没有变化，哎，没有变化啊，没有变化，所以这里边我们要说的一句话，第五一条叫什么呢？叫做相对定位，不会改变元素的什么呀性质，哎，块还是。

块内联还是什么呀，内联啊，内联还是内联，所以注意啊，你这个块元素即使是相对定位以后，它的宽度还是它负元素什么呀，全部你内联元素即使开启了相对定位，你的大小你还是什么呀，你还是不能去设置什么呀，宽高，也就是说元素的性质不变，其实第五条和我们说的什么呀，第三条是什么呀，是一回事，为什么一回事啊，为什么性质没变呀？哎，因为它是不是还是在我们这个文档楼里啊，哎，所以它才这个性质没变啊，性质没变好，那这个呢，就是我们说的一个相对定位啊，相对定位我们这儿呢，先停一下。