探讨绝对和相对在位置定位上的异同

时间：2023-03-30 23:39:34 CSS

相信学过CSS的同学都对位置的各种属性，尤其是绝对和相对定位感到困惑。希望通过代码实验揭示绝对定位和相对定位的本质区别。1、默认定位的HTML结构如下：

和

为距窗口顶部的距离方便观察，neighbor和child2的div为比较位置，我们真正关注的焦点需要定位在child1的div上。

位置属性

相对&绝对

CSS如下：.parent{background-color:yellow;高度：200px；宽度：200px；显示：内联块；}.child1{背景色：绿色；高度：100px；width:100px;}.child2{背景色:royalblue;高度：50px；宽度：50px;}.neighboor{背景色：粉红色;高度：200px；宽度：200px；display:inline-block;}先看一下默认定位的效果（地址栏是专门预留的，方便比较位置）2.相对定位先来看一下官方的解释：生成一个相对A定位元素相对于其正常位置定位。让我们尝试为child1添加相对定位，并辅以顶部和左侧位移值：.child1{background-color:green;高度：100px；宽度：100px；位置：相对；顶部：20px；left:20px;}效果如下：我们可以看到绿色方块代表的child1的左上角相对于原来的位置发生了位移，但是其他的div都留在原来的位置，就好像child1的位移没有影响到他们。所以我们总结一下相对定位：1.相对于元素原来的位置进行相应的位移；2.其他元素的位置不受影响，也就是说被定位的元素原来的位置还有一个占位符，没有被释放。3、绝对定位首先我们看一下官方的解释：生成绝对定位的元素，相对于默认定位以外的第一个父元素进行定位。让我们尝试在child1中添加绝对定位：.child1{background-color:green;高度：100px；宽度：100px；位置：绝对；顶部：20px；left:20px;}我们看到效果如下：我们观察到，绿色块代表的child1相对于浏览器视口发生位移，其原来的位置被释放，被紫色块代表的child2占据。这里我们很容易就可以得到绝对和相对最重要的区别：相对定位不释放原来的位置，而绝对定位释放原来的位置。还有一点没有解决，就是相对于谁的绝对定位位移。在我们刚才的实验中，位移“似乎”是相对于浏览器视口而言的，但事实真的如此吗？我们来研究一下官方对“默认定位以外的相对于第一个父元素定位”的定义。我们刚才的实验中，parent、container、body都是chidl1的父元素，但是parent和container都是默认定位的，所以“默认定位以外的第一个父元素”就是body元素。现在我们对parent进行相对定位（这里不用设置LTRB偏移值，去掉parent默认的定位属性即可），结果如下：果然如我们所料，此时““默认定位Element”以外的第一个parent为父级，所以此时child1相对于黄色块代表的div进行了偏移，而由于释放了原来的位置，紫色块代表的div2占据了它的位置。总结一下绝对定位：相对于谁定位有点复杂：就是找出定位元素的父元素链上的所有父元素，默认不定位哪个元素（即静态定位)从近到远，然后相对于它的位置。定位元素会释放原来的位置，添加其他元素，就好像float属性让它浮动一样。当父元素链上的所有父元素都默认定位时，那么绝对定位就是相对于body元素，效果和fix定位类似。相信通过上面的代码实现探索，大家对绝对定位和相对定位有了更深的理解。其实你只需要把握两点：1.相对于谁来定位2.是否释放原位置（官方说法是“文档流位置”）大部分情况下就够用了，不要混淆他们在未来:)

上一篇：什么软件可以无损转换音频格式？

下一篇：ImageMapping——我的web前端自学之路进行中2

探讨绝对和相对在位置定位上的异同相关文章