相对定位的基本概念
网页设计里，CSS有个相对定位挺实用的，能让部件在原来的地方活动一下，不会阻碍其它部分的安排。这技能就跟没动过差不多，家伙们还守着自己的地盘，也不怕被别人挤了。我们把握住这些家伙的顶部、右侧、底部、左侧属性，就可以让它们相对于初始位置的距离达到想要的大小，也就搞定满意的整体布局。
相对定位的实现方法
想用CSS实现相对定位，其实超级简单！首先要将元素设为相对定位，就在CSS样式里面添加position: relative;这句代码就行了。接下来，调皮地调整top、right、bottom和left这四个参数，元素位置就听你话！举个栗子，设置top: 50px;和left: 50px;，元素就会优雅地下挪和右滑各50像素喽~
代码示例解析
看这里哥告诉你如何搞定 CSS 的相对定位！我们先假设你手里有个 300px 长宽，淡灰色的小盒子，然后又丢了个 100px x 100px 的很炫酷的小红盒子到里面去。现在，只要给这个小红盒子添上 position: relative;，你就可以随意移动它了哟~
好嘞，咱们就把这小盒的’stop’跟’sleft’分别加个50px上去，然后你看着它就能往右上方挪过去50像素是不是感觉它挨着屏幕边上多了点？不用操心，虽然位置变了，但还是牢牢待在那儿的，别人也休想动它半分毫毛哈。
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
top: 50px;
left: 50px;
}
相对定位与文档流
记住，相对定位不会改动文字位置的，它只是改变一下大小或移位一点，原来那个地方还是会保持原样，绝不会乱跑的。这样的话，网页布局还是那么稳定，局部调整一下都没问题，根本不会影响到整个版面！
咱们接着聊，说到相对定位，加点儿z-index 属性可就是锦上添花了！这样就能知道哪些东西怎么摆才能互不干扰，不论是在前头还是后头。举个例子，如果某个元素的z-index 值设得高点儿的话，那就要排在最前面咯；反之，数值低一点儿，这货就待在后头啦～
适用场景与注意事项
相对定位这个功能，就是能不动整个布局就让局部位置微调，你要是嫌网页上看图标不顺眼，挤在左边太突兀，你就可以试试这个方法把图标稍微往右移点，看起来就舒服多了。
用相对定位的时候得注意哦!首先,被你定位的位置千万别带浮动属性，不然就乱了。然后，上下左右移动顶部、右侧、底部和左侧时，千万别让它们跑出去了，看着会很奇怪的。
总结与展望
关于相对定位这个CSS技能，就是把元素挪动一点点儿，既不影响其他元素也别动自家位置。想去哪只需要掌握 top、right、bottom、left 这几个神器。
下次做网页设计，试试加上CSS的对齐服务，这样搞的话布局会更舒服些，还能让大家更喜欢。我真心希望大伙这次学到了就别忘记了，别只知道唠叨没行动，展示下咱们的实力出来，做出点惊艳的东西！
评论0