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

好，我开始来上课，那么这块呢，我们再来看一下我们的这个定位属性啊，那么定位属性咱们先来看我们在哪块能用上啊，比如说在这里边我打开了这个百度对吧，那百度这里面有一个登录，咱们来看啊，我点击登录，那么点击登录以后咱们来看啊，在这里面有什么，后面是不是被一个灰色的教程给遮到了，然后在它上面出现了这么一个东西，对不对，然后呢，你看我点到后面的任何一个东西是不是都不好使。看到了吧，是不是都不好使，对吧，我只能什么只能点这块的内容进行什么进行输入，看到了吧，哎，这就是用定位来做的啊，那么还有哪些呢？比如说咱们再看在学习原地这里边。啊，你比如说你看我现在鼠动鼠标往下拉，拉那滚动条这一块内容是不是终定位到这儿，包括这块内容是不是始终也是定位到底部的，还有什么，还有这个这个这个菜单对吧，你看啊，我往下拉，你看它始终是不是也在这儿，哎这些都是定位做了，包括什么，比如这里边的什么更新啊升级啊，更新呢，更新呐，对吧，这样的这种小文字。

这种小文字啊，都是什么，都是用定位属性来做的啊，所以定位属性在我们页面布局时会用到的非常多，而且也很常用啊，那咱们来看一下定位属性都有哪些呢？这里边第一个叫什么静态的，也就是我们默认的啊，也就是说我们随便写一个元素默认对吧？然后另外还有什么，还有相对定位和绝对定位，相对定位叫什么？绝对定位叫absolute，以及这个fix叫什么？根据窗口去定位啊，它就是根据窗口去做的这个定位，好了，那我们就来看一下，我们先来看我们的这个相对定位啊。来，比如说在这里边我们新建一个页面。啊叫做零一相对。定位啊，这里边我们要研究的就是相对定位，那么主要针对于相对定位，我们要研究什么呢？就是要研究它的这个定位参考点，它的参照物是谁，对吧？哎，它定位参考点在哪里，只要知道定位参考点了，那我们是不是就会移动它了，对不对？那咱们来看啊，在这里边，比如说我去。

创建一个div，比如说给他设置一个叫BOX1啊，这是第一个盒子，然后再来div叫做BOX2，这是第二个，然后再来一个叫做。Div focus3ok，三个盒子，那么三个盒子在这里边，我们给它设置一下style标签，比如说div，然后with宽度我让它为100，然后H的高度也为100，好了，B加background第一个颜色，我让它为这个颜色啊注意我现在设置的话是三个元素都变。对吧，三个元素都变，然后呢，我再单独的去设置每一个啊，比如说井号BOX2，让它的B背景颜色变成呢，变成加绿色，然后再来井号box斯三，让它的B变成什么，变成这个蓝色，好了，这个时候我们再看在我的阴面中是不是有这三个颜色了，对吧？哎，这个怎么写写的变成黑色了啊BCK啊be。

好。走OK，现在有这三个元素了，那么咱们来看啊，比如说我给中间这个绿色区块做什么做定位，那怎么办？我是不是要给他设置啊，比如这里边绿色区块是不是它呀，那给他设置一个POI等于什么呀，等于。好了，那么设置完以后，现在我们来刷新看有什么变化吗？没有对吧，因为什么我只是给这个元素做了一个定位，但是定到了哪里呢？我们并没有说对不对，所以这里面我告诉他距离左侧100像素，距离顶部也为100像素，对不对，那。OK，现在我们再来看。走，你你看他到哪儿了，是不是到我的这个下边来了，哎，那么也就是说在我们去做相对定位的时候，它的这个参考点啊，是以谁为参考点，相对是不是相当于自己的这个位置去做定位的，对不对，哎，相当于自己这个位置境内，那么当前他在这块对吧，我让他距离左侧100。

这么往这边移动100，然后在距离顶部100，是不是就往下移动100，所以这个元素显示到了这块对不对，那现在咱们也可以干嘛，通过我们的这个标尺工具。来我们可以量一下啊，你看它距离上边，在他刚才出现的这个位置上边，到这为止是不是100像数。对不对，那同样在这里边，我们再给它干嘛，方向切换成水平的距离，这边也一样，是不是也是100像素。是不是从这。对吧，到哪到这块位置没错吧，哎也是一样，100像素啊。那好了，这是咱们的相对。定位，那么这里面还会遇到，还会看到一个结果，什么结果就是我相对定位的这个元素啊，一旦被定位走之后，也就是他从这个一号位置跑到了他自己这个二号位置的时候，它原有的这个一号位置这块内容是不是空的空的，但是这个蓝色区域会上来吗？不会，对不对啊，也就是说相对定位的元素它会占据什么，占据原有的物理位置，没错吧，哎，那OK，我们来这里边。

去记一下啊，在这里面相对地位。叫做。相对。定位是吧，是以什么呀，以。当前元素是不是以当前元素为参照物啊，哎，为参照物移动指定距离的另外方式啊，以单纯元素为参照物移动指定距离的定位方式，那么还要去注意的什么呢？还要去注意的是。注意什么呀，叫做。元素。啊，一代。严肃做相对。定位后啊，依然依然会保留原有的物理位置。屋里位置对吧，那同样。这里面还有个问题啊，还有什么问题呢？如果他要是个嵌套层呢。

比如说在这里边div里面包含了一个div div里面又包含就先养成div吧，啊比如在这里边我们来个ID等于什么呢？等于这个O对吧，然后再来还有个I did等什么，等于这个音的。一个外层一个内层对不对，那接下来也一样啊，我再给它进行设置井号O，外层的wit就宽度，比如变成200HE也为200B bank给它pink。这是它外层的，然后里层的呢，In的给它的这个WTH宽度为100，诶这个不用设置了，它本来就是100对吧，那我直接给它BK back个go，让它变成一个粉色，哎，有了啊，那再来。呃。橙色吧，好，那现在我们来看啊。刷新看当前元素是在这里对不对，现在啊，先不用考虑别的，我先用一些其他的手段把这个元素挪走一下啊，挪走只是为了我们来要找的是，如果在我定位的时候，我给子层定位它的参考点应该在哪看好了啊，我先用一些手段给他挪走啊，Mar g这个东西我们没讲过呢，还啊。

然后给他20。然后这个也一样。MR减也给他20好了，现在咱们来看啊，我这两个元素都在挪走了，对吧，而且它错开了，它原来这个位置，原来在我没有给它移动的时候，注意我没有给他设置这个移动的时候，它是什么，是不是顶头了对不对，那现在我给他设置了移动。是不是移动到了这里边对吧，那问题来了，接下来我再给它做一个position的，还是相对定位对吧，距离左侧100像素，距离顶部依然是100像素。好，那么问题来了，我想问的是，当我刷新页面，这个区块应该在哪？如果说这个区块是在这个位置显示了，那么也就是说它的定位参考点依然是它原来的这个点对不对？如果说这个区块要是在这个位置显示了，那么也就是说它的定位参考点是不是依然符合的是当他当前他自己的位置对不对？哎，那现在咱们来看他到底在哪刷新。

你看是不是已经超出了，哎，那么所谓它已经超出了这个部分，是不是就相当于刚才。我们在定位的时候，是不是它的参考点依然是你的自己的位置，对不对？哎，所以大家记住，我们只要做相对定位就相对谁呢？相对于当前元素自己的位置，无论你在哪，只要是你当前出现这个位置，你在给他做定位，它就以当前这个位置为参考点去移动指定的距离啊，这就是咱们的相对定位啊好，那这节课我们到这里，下节课我们再来看一下我们的绝对定位。