一、相对定位与绝对定位的基本概念
你可能忽视了一些动态效果是怎么做出来的，其实用到了两种不同的技巧：相对定位和绝对定位。首先来说说相对定位，简单理解的话就是，变动之后看看位置发生了什么变化。举个栗子，想让某物件向右移10像素？直接在原来的基础上往右拉就可以了。而绝对定位，跟这个略有不同，它的坐标不是按照原物件为基准的，还要考虑它爸爸（父元素）的位置。如果爸爸没固定住，那就以整个网页的身体部位（主轴线）为参考。
二、相对定位的特点
说到相对定位，益处可大了去。这啥原理？别担心，哪怕挪动元素位置，其他地方还是原样不变。瞧，相对定位就是这么学问大，实际上元素没动过，只给人换了位置的错觉而已。想重排网页又怕乱套？那就选相对定位，效果棒得很！
三、绝对定位的特点
固定不动的元素可是乖乖待在原地哦；但要是用了绝对定位？随便你!挪到哪儿去都无所谓，老地方自然就空出来了～就算是定位祖先不见了也没啥大不了，连着body一起动！那什么弹出菜单啊、悬浮按钮啥的，就得靠绝对定位才能搞定啦～
四、子绝父相的由来和具体使用
你听说过“子绝父相”吗？就是在咱们搞网站的时候，家里孩子要用绝对定位，爸爸就要改成相对定位。这样做是为了让孩子在浏览时，爸爸还能保持原位当参照。有了绝对定位，孩子就能随便乱晃！
五、相对定位的实际应用
Positing稳定靠谱，让你轻松拖拽部件或图片而不碰其它特效。只需调整顶部、右侧、底部、左侧这些小数值，你说放哪儿就让它呆那儿！
六、绝对定位的实际应用
别说啥绝对定位只是换个颜色搭个版这么容易，其实真的很厉害！比如想让网站导航栏动起来，或者给照片加点有趣的注释神马的都不是事儿！只要学会了这个技术，随时随地在网页上摆弄图标、按钮和文字再也不受死规则束缚
相对定位的元素，通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离，right 表示相对于原本位置的右外边界左移的距离，top 表示相对于原本位置的上外边界下移的距离，bottom 表示相对于原本位置的下外边界上移的距离。并且，偏移量可以是正值，也可以是负值，负值表示向相反的方向移动。 left、right、top、bottom 这 4 个属性的值，可以是长度值（可以是绝对单位或相对单位），也可以是百分比。使用百分比时，水平偏移量根据其父元素 width 属性的值计算得到，垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是，在设置偏移时，如果父元素没有显式定义 height 属性，就等同于 height 属性的值为 0。
七、相对定位与绝对定位的结合使用
相对和绝对定位，其实就是两手抓的事儿，非得同时操作才能有效果。可别以为它们俩没关系就不当回事儿。想像下呗，那么多小玩意儿装在一个大箱子里，你肯定希望它们能各就各位？那我们该怎么做？首先给大箱子定个相对位置，接着再给每样小东西标上绝对定位。虽然看着有点麻烦，但总比傻等强多啦～
八、注意事项
记住，用相对与绝对定位时要小心点儿。还是尽量别使绝对定位，容易把布局搞疯了；然后，相对定位挺好用的，只是别乱用就没事儿。所以，想清楚再动手，多练习练习，咱们的布局才能稳妥！
九、案例分析
别急这事儿不难，试几次就懂！做网页时，把导航栏相对定位放对位置，整个页面看起来舒服不少；特殊的按钮，就用绝对定位的办法，不仅能稳定页面布局，还有点小创新。
十、总结与展望
学会用相对定位跟绝对定位这俩鲜为人知的CSS妙招，搞定复杂布局soeasy！跟着教程多实践几次，随心所欲摆设网页元素不是梦，效果超赞的！不论css怎么升级变样，这些基本手法在网页设计中都是必备技能！
看完这篇文章，了解了绝对和相对定位的CSS是啥东西了吗？你们在日常开发项目中更爱用哪种方法？快来分享一下你的实战体会，记得点赞分享，让大家也学习一波！
评论0