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

这边刚才说的是一个相对定位，其实相对定位呢，整体来说是比较简单的，我们只需要一个position来一个relative，说开启定位的呀，但是其实会有一点大家会感觉到有一点难的话，就是我们这个偏移量，有时候这个偏移量你干嘛呀，有的时候搞不清楚是吧？哎，这left我设置多少合适，Right设置多多少合适，我才能把我这个元素放到我们那什么呀，想一相应的那个位置，所以这里边呢，你一定要在这个心里建立一个什么呀，一个坐标的这么一个概念，诶就是说你要想象什么呀，我这页面里实际上它是有一个坐标的，比如说我现在把这个偏移量我给它去掉，去掉以后我这个保存，我们说了相对定位元素是相对于元素自身进行定位的吧，那你就要想，既然相对元元素自身，元素自身在哪呢？是在是在这儿呢呀，所以这实际上是有一个坐标的，这个呢，是我们这个坐标原点从这儿横轴，诶，这是一个这个竖轴诶。两个轴，那这里边我如果要设的是life的200就相当于什么呀？是不是X是200呀，那相当于什么呀？我的元素200跟哪了二这是零，按200是不是应该就就跟这呢样，哎，所以这是200的位置，所以如果你设置一个life的200元素干嘛了，应该跑到这来了啊那现在是life是200，那top是什么呀？Top是不是零啊，哎，Top是在零，那你如果再往下走，你再来一个TOP200是不是就挪在挪在这了呀，那实际上这个200 200说的是哪个点呀？诶说的是这个点的位置啊，说的是左上角那个点的位置啊，如果你设的是top left就说是说的是什么呀，左上角这个点的位置，所以在在进行定位的时候，一定要干嘛呀，一定要有这么一个坐标啊，一定有这么一个坐标。

好，那这是我们这个相对定位，然后我们来说我们这个绝对定位，绝对定位呢，我们来说一下，那什么叫绝定位，我们还是先写这么几个div div我们来点一个这个，呃，Box，我们来还是创建这么三个div啊，Dollar乘一个三啊，同样我们这么三个div还是给他们分别去设置一下这个样式，直接来一个这个带我把刚才那几个写一下吧，还是点一个boxs一来一个这个wise，这来一个一二百个像素，然后这来一个hi也来什么呀，诶200个像素，或者还有一种简写方式，但是这里边它这个工具有时候不太好用它，因为你一用H它就有干嘛了，就有提示了，你可以直接写一个HH什么呀，200，然后A2TABLE。

诶它也可以出来，它也可出来，但是这工具有点不好的地方，就是你一摁H以后吧，它有提示您，二你出来一堆是吧，诶就出来就不太对了，所以这里边呢，你简单写一个HR就可以出来，那Y呢，就什么呀，哎W200就是什么呀，200个像素啊，你后边跟一个数直接就可以生成出来了啊生成出来了好，这是我们说的这个，然后background color background color来一个这个来一个红色吧，Red，然后呢，我这复制一个，这是我们这个二，这是我们这个三，这来一个这个yellow，这来一什么呢？Yellow保存还是这么三个盒子上中下，那接下来我们来说谁呢？说我们这个绝对定位，我们还先说第一个问题，我们要设置绝对定位，我们现在干嘛呀？先得开启我们绝定位，那什么时候开启呢？当我们这个position，哎，Position属性值设置为什么呢？设置为我们这个up salute时，则什么呢？诶则。

开启了我们这个元素的一个什么呀，相对不是相对，哎绝对定位啊，绝对定位哎，我们相对定位是relative，绝定位是一什么呀，啊吧salute，所以我这来一个position来一个啊salute我一保存，那我们说了这个绝定位就已经开启了，我们先来看它有什么变化啊，有什么变化来我直接一刷新走你。

诶黄的没变化是吧，但是发现什么了，那绿的是不是没了呀？诶是不是没了呀，来让他来一个三百三百大一点，我这一刷新走你诶是没了吗？哎不是从哪去了呀，是不是被黄色这个盖住了呀？哎，那鸡那你你就会发现什么呀，当我给这个黄色开启了这个绝对定位以后，我这个BOX3是不是上去了，说明什么？哎，脱离文档流了啊，所以注意绝对定位的特点，第一个我们就看到了绝对定位的这个特点，我们说叫什么呀，开启绝对定位会什么呢？会使我们这个元素脱离轮道流，所以什么呀，你这一脱离道流它不就滚上去了，它就滚上去了啊，所以这个是它跟相对定位一个挺大一个区别，相对定位不会脱离文档流，而绝对定位完了会脱离文档流啊，会脱离文档流，好，那这里边我们说第一个，然后接着来。

说那你会发现什么呀？诶，那你看我这个爆塞的位置有没有变呀，没有变化吧，哎，没有变化，所以这个呢，和相对定位有点差不多，所以这边我们来说什么呢？诶开启绝对定位以后，如果什么呢？如果不设置偏移量则什么呢？则我们这个元素的这个位置不会发生变化啊，注意只是说的什么呀，位置啊，指数的位置，所以你看我没有设置偏移量，元素是不是还在它原来那个位置啊，哎，原来那个位置没变啊，原来那个位置没变，那好，那现在我们来说了，那我要给它是不是要设置偏移量了呀，那设置偏移量我们来设置一个呗，我来什么呢？我来一个life的，来一个这个200个像素，我一保存是不是向左偏移200个呀，那就是向右移动200强速啊，向右移动200强速，我这一刷新走你诶是不是也移这来了呀？诶但是发现好像诶它不太一样了。

在我们这个局相对定位的时候，我向左来一个live的200什么效果呀，咱们看看啊，有点像，但是还不太一样啊，我们来看刷新，现在这是我们这个绝对定位是在这儿呢，而我们相对定位呢，是不是全过来了呀，而我们绝定位是不是还少了一块啊，那首先注意我这三个D大小，这这两个D大小是不是一模一样的呀？哎，我这lab值设置是不是也一模一样啊，但是发现位置却不一样，那这是为什么呀？诶那那就意味着我们这个元素它定位的那个位置是不同啊，我们说了相对定位元素是相对于什么呀，自身，诶那我们说绝对定位是相对于谁呢？诶，那我们怎么看它相对于谁呀？诶，我们要看它相对定位，它相我们要看这个定位元素，它相对于谁去定位的，我们是不是要看，我们说了是不是有一个坐标啊，我们是不是要看它这个坐标原点在哪啊，原点在哪儿，它是不是就相对于谁定位啊，哎，那我怎么看坐标原点呀。

我这坐标原点是不是就是零零那个点呀，零零那个点，那我就来一个什么呀，TOP0 left的零是不是应该坐标原点呀？哎，我们来看看啊，来一个，那我就别写left，直接来什么呀，0PX，诶不是这啊，就跟这改这是相定位的，那我们决定位这来什么呀，Left来一个0PX，然后来什么呢？Top也来什么呀，0PX我要看什么，我要看它的这个坐标原点在哪啊，原点在哪，我这一保存，咱们来看一刷新走你哎哟跑哪去了。是不是跑窗口左上角去了，也就是说坐标标点是谁呀。是不是这个点呀，哎，是这个点，诶，那这个点是谁呀？是不是就是我们浏览器窗口啊，哎，窗口那也就是意味着我们这个相对我们这个绝对定位它干嘛呀，绝对定位它是诶但这句话先别记了啊，相对于我们这个浏览器窗口进行。

定位的，诶决定位是相对于浏览器窗口进行定位的吗？是不是这样的？诶那这里边我们需要测试一下啊，那首先我们现在看到原点写完了，的确是不是浏览器窗口左上角这点呀，哎，所以现在我在设置left right，实际上都是相对于谁呀，是不是相对于这一个点在设置啊，哎，这个点在设置啊，所以我这如果来什么呢？来一个这个live的200个像素，实际上干嘛呀，是不是相对于这个点移动200呀？哎，我一刷新走你是不是移这来了，诶那为什么没有没有到这儿来呀，因为我这是还有一个边距的呀，哎，有个边距呢，有一个八个像素的一个边距，所以这差这么几个像素啊，差这么几个像素因为什么呀？因为是它相对于浏览器这个窗口这个边上去定位的啊，边上去定位的好，那我们现在看到了，那难道说我们原点就是什么呀，就是浏览器窗口吗？这里边我们要做一个测试，怎么测试来回到页面里，我要改变一下这个结构，在我们这个BOX2这里边呢，我来一个外边，我来一个BOX4 box4里边。

诶，不是写啥去了，这是div点一个BOX4，然后呢，将我们这个BOX2放到box里边，现在我们干嘛了，我是不是给BOX2找了一个什么呀，负元素啊，负元素是我们这个BOX4来给他设计个样子，点一个BOX4，让他们让它大一点，VI来一个这个300个像素，Hat也来个这个300个像素，然后background color来一个什么呢？来一个orange来保存，我们现在来看效果，诶我这一刷新走你，诶是不是多了1ORANGE啊，诶我们这个BOX4，但是你会发现我虽然加上了BOX4，我这BOX2这个原点是不是还在浏览器窗口啊，好像跟BOX4是不是没有什么，没有啥关系吧，诶没有啥关系，来咱们再做这么一个事儿，Box个四开启我们这个BOX4的一个什么呀，相对。

定位啊，开启BOX4的相对定位position来一个re，是不是开启相对位啊，来我这一刷新走你，哎呦开启完相对定位以后，BOX4没有变化，但是发现什么了，是BOX2下来了，诶那BOX2这我是不是还设置的是零零的呀？那也就是说刚才我那个00点还在这儿呢，当我一给BOX4开启了相应定位以后，00点跑哪了？是不是跑这儿来了，哎跑这儿来了，那这是为什么呀？哎，直接来说啊，绝对定位是什么呢？是相对于什么呀，离它最近的开启了定位的负元素进行什么呀？进行定位的啊，也就是说它是什么呀，相对于离它最近的开启了定位的副元素进行，诶不是负元素啊，严格来讲叫什么呀，祖先元素，因为你要是副元素就没有什么最近的了，是吧？副元素就一个啊，反正就一个，我们说什么呀，祖先元素，所以我们这来看，那这里边现在我们说了，我bos复元素是谁呀？BOX4，那BOX4开没开启定位啊，开启定位了，所以干嘛呀，它就相对于BOX4进行定位，那如果BOX4没开启，我这还有一个div点，一个BOX5，而谁开启了呀，BOX5开启了，这就相当于谁呀？哎，相当于BOX5进行定位。如果box。

五和八四都开启了，相当于谁？哎，八括四，注意是离它最近的开启了定位的祖先元素定位，再强调一遍，什么叫离它最近的，不是什么叫这个开启定位叫什么呀？Position值，只要不是默认值，Static都叫什么呀？开解定位啊，开启定位，那还有一个问题，那我们刚才说呢，Box个四我没开启定位，BOX5干嘛呀，也没开启对吧？那现在什么情况，是不是又回到窗口了，所以这里要注意，如果。

如果所有的什么呀，哎，所有的祖先元素都没有开启定位，则什么呢？则相对于什么呀，浏览器诶窗口进行什么呀定位啊，则会相对于诶，则会相对于我们这个浏览器窗口进行定位啊，所以这里边你要区分开我们决定位的时候，我这个元素到底是相对于谁定位的，是相对于它的什么呀，浏览器窗口还是相对于它的什么呀，副元素或者某一个祖先元素一定要搞清楚，但是这里边我们来说，我们说了绝对定位是相对老写相当于了，是相对于离它最近的开启了定位的祖先元素进行定位的吧，所以这里边我们来说一下啊括号一个一般情况我们什么呢？开启了这个子元素的这个什么呀，绝对定位都会什么呢？都会同时开启负元素的什么呀，哎，相对定位啊。

一般开启了子元素的绝定位，都会同时开启负元素的相对定位，为什么？因为这样我们就知道了，我子元素是不是相对于这个负元素进行定位的呀，但是这是一般情况下啊，大部分情况我们会这么干，但是还有一些特殊情况不这么干的，根据具体的需求我们去设置啊，去考虑这个情况，好那这就是我们说一个绝对定位，诶绝对定位和我们这个相对定位一个区别，绝对相对定位是什么呀？相对于自身位置，而我们这个绝定位干嘛呀，相对于什么呀？离它最近的开启定位的组线元素或者是谁呀，浏览器窗口啊浏览窗口好，所以现在我们现在BOX4有没有设置偏移量，有没有设置绝对定位啊，没有，所以现在我们BOX2的所有偏移量都是相对于谁啊，相对于诶窗口进行定位的啊，窗口进行定位的，好，那这块我们就看见了，那我们现在看这儿吧，那我这里边再设置一个吧，我来一个life的100个像素，TOP100个像素，那这个是不是也是相当于窗口进行定位的呀，保存一刷新走，你是不是移到这个位置了，我们要看一个问题，这是BOX2，这是BOX1。

二在什么？二是不是在一上面啊，诶二在一上边，那也就是说我们又一个特点，第四一个叫什么呀？哎，叫做绝对定位会使我们这个元素提升一个什么呀？哎，一个层级啊，绝对定位会使我们元素提升一个层级啊好，然后再看它的特点啊，再看它特点，我们把这个偏移量我先给它出掉保存，现在一刷新诶是不是回来了，回来以后呢，我先把绝定位给它也铺掉保存，这一刷新封紧是这么一个效果，对吧？来我们现在干嘛呢？我把这宽度啊给它。去掉现在它的宽度是不是没了呀，默认是负元素的100%，它的副元素是BOX4，是不是应该就是300啊，诶来，我这一刷新走你全部吧，诶好，开启我们的这个就这定位，诶那你说他的宽还有没有宽还有没有宽还有没有了，诶是不是它会使元素脱离文档流啊，脱离文档流了以后，宽和高默认被什么呀？哎是不是内容撑开啊，所以我这一刷新走你是不是没了呀，为什么没了，因为宽度丢失了啊，宽度丢失了，所以这里边我们来说一下啊，开启定位以后，它会发生这么一个变化啊，还是给它改回来，先外来一个200个像素保存，然后你再写一个，再来谁呢？来一个败，我是一个这个百保存，我们这来写样式，点一个S1 S1，我们来写一个样式，外来一个100个像素。

艾来一个这个100个像素，然后来一个background color来一什么呢？来一个这个yellow保存，我们先说100乘以100管不管用，哎，不管用，宽高不会起作用，哎在这儿宽高没有起作用啊，没有起作用，然后呢，我来一个开启学历机会会有什么变化，哎，Position我们来一个absolute保存，我这一刷新走你完了是不是宽高起作用了呀？哎，宽高起作用了啊，所以这里边注意这些特点和我们这个浮动特点是不是很像啊，哎，其实都是什么呀，脱离文档流的一个特点，所以第五一个我们叫什么呢？叫做绝对定位，会改变我们元素的什么呀，性质啊，会改变元素性质我们叫什么呀？内联元素变成块元素啊，内联素变成块元素，块元素的这个宽度和高度都被。

内容撑开啊叫什么呀，默认啊，块元素的这个宽度和高度默认都被内容撑开啊，所以注意我们这个绝对定位的这些特点啊。再简单回顾一下绝定位开启定位会使元素脱离文档流开启定位绝对定位以后如果不设置偏移量元素的位置不会干嘛呀，不会变化，指的不是性质啊，只说它这个位置，绝定位相对于离它最近的开启了定位的组先元素进行定位啊，如果组先元素都没有开启定位，则会相对于什么呀？浏览器窗口进行定位。第四一个绝对定位会使我们这个元素提升一个什么呀层级诶第五一个绝对定位会改变元素的性质啊，性质就这么一些，来停一下。

嗯。