Web前端网页制作初级教程 26.绝对定位 学习猿地原创

好，那我们继续来上课，那么这节课呢，我们再来看一下我们的绝对定位啊，那么绝对定位一样，那么我们也要了解什么，了解他的这个参考点，对吧？只要知道它的参考点，我们就知道它的定位在哪里了啊，那一样，咱们在这里看，我在这里边再来新建一个H页面，叫做零二绝对定位啊。好吧，那在这里面还是跟刚才的设置。保持一致。比如说BOOK1。有三个。元素对吧，分别是book是一，Book是二是三，然后我先进行统一的设置style标签，然后叫做div，我们给它设置个宽度为200。劈叉，然后高度也为200，劈叉好了，然后这个时候给他一个背景颜色background，再来一个行，就这个颜色吧，啊有了背景颜色以后，接下来单独去设置D。啊，不对，是BOX2对吧，给它的背景颜色单around给他设置一个这个。这个颜色啊，然后再来还有井号波斯。

三啊，给它也进行设置一下单个，然后再来一个这个B，呃，Dark。行插眼啊，这已经有个插眼了是吧，那换一个bar。呃，阿Q有没有？阿Q，没有这个是吧。随便来一个。就它了，好了，那现在我们来看啊，这个页面不是这个页面了啊，在这里边。哟，这么大吗？啊，我设置说二百二百是吗？那我们改一下啊，还是一百一百。100。100。好了，那我们先看我们的这个页脉默认效果对吧，那接下来我给这个颜色啊，那才我鼠标所带的这个颜色进行定位也是一样，第二块对吧，给它做什么呢？做绝对定位在这里边叫posi position等于阿做绝对定位啊，那么当绝对定位以后，现在咱们来看我一点击刷新诶谁没了。

是不是下面的元素没有了，对不对，下面元素哪去了，下面元素在它底下。好在这个当前我定位的这个元素，这个元素是什么颜色，我还不好来说啊，我给换一下啊，在这里边我换一个我认识的颜色，来换个blue蓝色。来刷新蓝色对吧，底下第三块我给他换一个绿色GRN，绿色好了再来刷新，现在你看绿色是不是没有了，绿色跑哪了？跑到蓝色后面了，也就是说当我们一旦把元素做绝对定位以后，它还会占据原来的物理位置吗？不会了吧，哎。因为它不占据原有的物理位置，所以这个绿色区块才上来。被蓝色给覆盖掉了，对不对？哎，那么一样，现在咱们看啊，我把这个叫什么定位给它注释掉，注释掉以后，现在你再来看绿色区块是不是下来了，看到了吗？哎，这就是咱们绝对定位，也就是说第一个问题，我们看到了绝对定位的元素一旦被定位以后，它将不会占据原有物理位置，对吧？那么另外我们开始去移动它，比如说我要它距离顶部为100像素100像。

数啊，距离也为100像数。那么这个时候我想问的是，当我一刷新这个蓝色区块应该在哪？应该在哪？如果它以它当前的这个位置为参照物的话，那它应该是在这个位置。对吧，那么如果他要以这个点这个元素所出现的位置为参照物的话，它应该在这个位置。对吗？哎，那么如果他要以我的浏览器为参照的话，他应该在哪儿啊，他应该在。这个位置所以错吧，哎，有一部分重叠的对不对？哎，因为我们说了它要绝对定位对不对？绝对定位，所以绝对肯定是什么，从根开始查找吧，对不对，跟我们相对路径跟绝对路径是不是一个概念，那么绝对定位的话，咱们是说白了就干嘛，就是以其他元素为参照物，移动到指定的距离对不对？那么其他元素在哪呢？其他元素咱们就得看它到底是以哪个元素对不对，那这样的话说是不是就排除了以它自己了，对不对？哎，那好了，那现在我们来刷新看一下中医。

你看到哪了，这个时候那到哪是不是到这儿啊，有一部分重叠的，那么也就是说当我们做了绝对定位以后，它是从哪，是不是从这个顶部的00点啊。是不是这样的，哎，它并没有从这个位置，如果它以这个元素为参照物的话，它应该是干嘛，是不是跟这个元素是相交的，不，没有相交是挨着对不对，不会有相交的部分，如果他要以这个包内体，也就是以浏览器这个00点去定的话，它才会有相交的效果，对不对，那现在我们来看是不是这样的啊。来这里边继续找到我们的标尺，我们去量一下，你看从我的最边框到这里边是不是才100像数。看到了吧，那一样我们给它换到垂直了。方向垂直啊，这回你再来看，通过最顶部。到这儿是不是也100像数，哎，注意啊，我们浏览器在默认的情况下，它有一个什么呢？它有一个外间距，有一个间距啊，这个间距多少呢？是八像数，你看我的我的这个这个色的元素元素不会。

I的顶部出现了对不对，为什么？因为它顶上有个默认八项数，你看啊，我给它放到最顶上，在这里边来，你看是不是有八项数对不对，一样垂直是那水平呢的方向，我们再切换到水平，你看。这里面是不是一样也有八项数啊，哎，所以这里面大家要记住啊，我们元素默认出现的是有一个八项数的一个间距的啊，这一个八间八项数的间距是什么间距，那么一会我们会说啊，讲盒子模型的时候我们会讲，那么这个时候大家就知道什么意思，那现在你只需要记住我任何一个元素在浏览器里面出现的时候，它都是有一个八间距的，八八项数的间距的啊。所以这个位置并不是我的00点，而真正的00点是谁啊？真正的00点是我浏览器的最顶上这个位置对不对？那么也就是说我元素一旦做绝对定位，是不是以其他元素为参照物，移动到指定的距离以谁是不是以包的体为参照物了？对不对，哎，这只是一种情况啊，那咱们先来记一下。

在哪呢？在这里边所谓绝对定位，那么绝对定位的话，这里边也一样啊，叫做。阿巴阿巴UT绝对定位是以以什么呀，其他元素作为参照物，对吧，移动指定的。距离指定距离的定位方式对不对？哎，这是咱们的绝对定位啊。好了。那呀，要注意的什么呀，叫做绝对定位的元素，对吧，会干嘛呀，不会不会占据。占据，诶，占据原有的物理位置啊，OK，这是咱们的绝对定位，那么一样，关于绝对定位的参考点，我们还要再说一说啊，关于。绝对定位的参考点对吧，那么刚才我们看到了啊，我的这个定位参考点。

是谁呀，是不是这个00点就相当于说是body了，对不对，哎，或者说页面或者说body都可以对吧，因为这个位置确实就是body的位置嘛，哎，也就是说它以谁呢？以body去定位了，那咱们来看现在还有一种情况啊，比如说呃，这块我不要了，我给他注释掉啊，还洋他们几个还原回来，来还原回来，还原回来以后咱们来看我这里面比如要有嵌套绳了。比如来个div。给他来个ID，叫做万。再来一个div，来个ID，叫做。好了，One two2个对吧？那么我只改变万的大小啊。WITH200 he也为200，然后。Bagbg为粉色，好了，然后再来，我们再来看井号兔兔的大小已经有了，对吧，我们就直接给它背景颜色就行了啊白格格变成什么呢？变成这个紫色吧，啊紫色现在咱们来看。

刷新OK，他们在这儿呢，对吧。这是一个嵌套层啊，那么现在我想问的是什么呢？当我给这个紫色在做定位的时候，它的定位参考点是哪儿？紫色在这儿对吧？给他一个PS position等于。瑞，不对，是阿尔法斯的绝对定位，好，当我给他做一个绝对定位的时候，这时候来刷新。好了，我没有移动的，所以它不会改变，对吧？那么接下来我们开始进行移动，Left距离左侧100像素，Top距离顶部也为100像素，那OK，我想问的是，当我一刷新这个元素应该在哪？如果只是它以它负类为参考点的话，那它应该在这个位置。对不对，如果它依然是以这个包的体为正方点的话，它应该是在这个位置对不对，那OK，一个一号位置，一个二号位置。咱们来看，当我刷新它在哪中医。是不是在我的二号位置，也就是说此时它的这个定位参考点是不是也一样，是谁呀，使用的是包对吧，对不对，哎，那OK，那再来，那比如说如果我给他的父亲也定位了，来看好了，我把这个注释掉啊。

重新刷新回来，复式呢，我给他做一个相对定位或者绝对定位也行，来process，等于阿法也做了一个绝对定位对吧，然后距离左侧200像素。距离顶部我也给他200乘数，那当然他父亲以谁为三十二五，是不是也以这个包点，那这个时候走，你你看他俩是不是过来了，对不对，哎，当前他距离顶部这个距离200对吧，这个距离也依然知道，也依然是200，没错吧，哎，而且。父类被定位走的时候，子类是不是也一样会跟随着走啊？你想想，如果你的父亲搬家了，那你是不是跟着也一样会搬家？对不对？哎，所以这个时候子类会跟着父类走，好了，那现在父类定位到这儿了，那么问题来了，此时此刻我再给它的子类再去做定位，POSITION100100的说，我想问的是子类应该在哪啊？也就是说如果子类还在这个位置上，那么一样子类参考点是不是也以这个零类点为准，如果子类要是变成这个位置，那就是以父类为准了，对不对？那现在我们来刷新，你看这个时候它的子类以谁为准了，是不是以它的父类为准了？

对不对，哎，所以这个时候大家要记住啊，如果。那就烂这呢啊，如果我这个元素的外层元素有做过定位，对吧，无论是相对的还是绝对，比如说这块我再换啊这个阿巴斯的对吧，我换成现在是什么，是不是这个相对定位了，哎，注意它负类是相对定位了，相对定位我一刷新它的位置可能会变，应该在这个位置是不是那再来刷新。你看是不是在这个位置，在这个位置了，那好，它的这个子类的绝对定位是依然参考点还是它。对不对，哎，所以这里边大家需要去被啊，去记第一点什么呀，叫做如果元素的外层元素是非TT非SP就非默认的对吧，也就是有了。

有了除默认值之外的。定位设置。对不对，哎，那么。这个诶。那么。这个外层元素。就成为。该元素的定位参考点。没错吧，那再来第二个。啊，再来看啊，还有什么情况呢？那比如说如果是三重嵌套呢，咱们来看啊，把这里边注释掉。这里边也给它注册掉，现在我让它还原啊，来刷新还原了，对吧，还原以后啊，咱们来看我在这里边再给它加一个div，里边继续给这个ID叫the three对吧，三个了啊，那同样这里边外层呢，我改成300。300还叫粉色里层的。变成二百二百啊width。

He。也为200好了，然后最里层的就是井号THR给它的宽度啊，它的宽度100了，默认了对吧，那我直接给他一个BA GR rud，为什么呢，为这个PPPP。就这个啊，一个浅的像米色色的，好了，是不是这样的，哎，那现在啊，咱们来看。这个时候我想问当前这个元素，我要想给他定位的话，它的参考点是谁啊，它的参考点是谁？这个剧里的这个米白色对吧？那么这里面咱们直接process process等于阿8UT给他，诶出了依然是写当前的位置对吧？我们应该给的是阿8UT给他再做TOP100和LEFT100的时候，你看给他在做绝对定位的，他的参考点是不是依然是body。看到了吧，哎，依然是包，那么也就是说，如果这个元素的外层元素没有任何一个position的定位，那么它的参考点是不是就为包？

对不对，哎，或者说是页面啊，那好一会儿我们再记，那再来看，如果此时它的这个。来主持的啊，他的谁呢？他的这个爷爷，也就是这个万成这个类对吧，这个万要是给他做了一个定位，无论是相对好像绝对的话，比如说我还是这个吧，给他移动走来。刷新好了，他过来了，对吧，过来以后他爹不定位，我稍微用一个手段给他移动走，他爹是不是就是个to啊，Mar marin left来十项20像数好了，这个数来刷新。你看他爹走了对吧？我想问的是，此时当我给这个子类米白色再去定位的时候，他应该。在哪啊，他应该在哪，你看好了，在里边找到这个三，我给他去做定位。给他做定，注意它的外层元素有做定位吗？没有，我只是用了一个手段给它移动走了，并没有做定位，对不对，而它的这个次外层为慢的这个这个家伙是定位的，对不对？也就是说在代码结构里边，你看好了这个元素在做绝对定位的时候，它的外层元素没有定位，而它的次外层有没有定位，有对不对？那OK，那现在咱们来看它的定位参考点是呢？如果他以当前父亲为参考点，它的位置就在这。

对吧，如果他以他的爷爷为参考点的话，他的位置应该在。对吧，如果他依然以包体为参考点的话，它的位置应该在。对吧，因为我这块没往上拖啊，好了，那咱们来看，现在我来刷新一下页面啊来找你。他以谁为参考点好，以谁啊，是不是依然以他的爷爷为参考点，对不对？那么也就是说在这里面我们又看到一个结果，也就是说如果这个元素的外层元素没有做过任何的这个position的设定，对吧？那它将会寻找距离自己最近最近的这个其他设定过position的这个元素，对吧？作为什么作为参照物啊，所以这里边我们再来去记。第二点。如果。元素的外层元素没有设置任何的py position的值。

对吧？那么该元素将寻找距离自己最近的其他。设定过POS在process的外层元素作为什么呀？作为参照物啊，作为参照。对吧，这里边有一个要求，什么要求啊，是不是必须是嵌套层，嵌套层啊，哎，你别说说我上旁边找去行不行不行啊，你别说我定位，我找的距离自己最近的，他没有，他没有，那他就你要不行对不对，他俩有什么关系啊，没有关系，这里边是嵌套层，是不是就相当于他是孙子，他是父亲，他是爷爷对不对啊，必须是这种嵌套层关系才可以啊，那么另外第三点。我们刚才也看到，如果元素和外层元素都没有定位，它的因默认参考点是不是就是body了，对吧？也就是说如果该元素的外层元素。中没有任何一个元素采用什么呀，POI。

定位。那么此时。定位的参考元素变为什么呀，变为body或者说页面啊。或者说页面啊，OK，这就是咱们的绝对定位啊，好了，那绝对定位这些参考点一定要大家给他记住啊，你看我们再来总结一下，如果元素的外层元素是非。Sta c啊，也就是说有了有了这个除默认值之外的这个定位设置，那么这个外层元素就成为什么呀，该元素的定位参考点对不对？哎，那第二种情况呢，如果元素的外层元素没有设置过任何position的值，那么该元素将寻找距离自己最近其他设定过position的外层元素作为什么参照物，这里边有要求必须是前照层对吧？然后第三点，如果该元素的外冲元素没有任何一个元素采用过普的定位，那么此时定位参考元素变为什么变为body，或者说什么说是我们的页面，好，好了，这就是咱们的绝对定位，好，那OK，这节课我们到这里，下节课我们再来看一下我们的这个固定定位啊。