相对定位的基本概念
说到CSS里头的定位属性，玩转元素可全靠它了。比如默认的相对定位(relative)，把这个属性加在元素上，它就能微调自己的位置~既不会乱跑也不会飞走，稳妥又合适，调节元素位置so easy!这样可以随心所欲地搞活动，其他元素还不受牵扯。遇到特殊状况，这个属性更是牛气哄哄！
“相对定位”真好用！这绝对是你网页设计时的得力助手，尤其是需要挪动那些小部件的时候。来个例子，想象一下你想让网页上的那个按钮移到右下方去，但是害怕破坏掉整体布局？现在就用”相对定位”！只需要设定 top、right、bottom、left 这四个值，轻松就能操控局部元素的移动距离了。这样的技巧不仅能让你任意摆放元素，即使只有几毫米也是可以做到的！
示例代码解析
让我们来看一个简单的示例代码：
css
.box {
position: relative;
top: 50px;
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #f1f1f1;
}
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #ff0000;
top: 50px;
left: 50px;
}
right: 50px;
}
这行代码就是让所有叫”box”的东西先往下走50个像素，然后再向右移50个像素哈~但记住不论移动了多远，它们最后都会回到原地
绝对定位与相对定位的区别
说到定位，除了常见的“相对定位”以外，还有个叫“绝对定位”的大家伙！别看它们长得挺像，但其实差别挺大的~这个绝对定位，是用那些没闲着的位置元素来瞄准自身的地点，比如说“相对”、“绝对”、“固定”之类的。老觉得给嵌套弄晕了？不用担心，直接把整个文档流当主轴就好。这样的话，那些小方块们就能绕开文档流，想摆哪儿就摆哪儿~
定在一个地儿的关键是那些吸睛的效果，比如弹窗和悬停菜单。为啥这么做？毕竟不管文件怎么动，都不用担心会挤跑其他东西，想放哪就放哪，超自在滴！有时候，加上z-index还能感受到神奇的重叠效果！
示例代码演示
让我们看一个绝对定位的示例代码：
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #f1f1f1;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ff0000;
top: 50px;
left: 50px;
}
.container {
position: absolute;
left: 50px;
首先弄明白，把容器大哥设置为position: relative，别那么抢眼，让其他兄弟也有地方露脸。再来看看我们的小豆子，给他些特殊待遇：position: absolute; top: 50px; left: 50px;这就能让小豆子在容器大哥那里特有面子了。因为容器大哥是相对于周边元素定位的，所以小豆子只能待在室内大哥附近。
总结
关于CSS里面那个position属性，你了解过吗?它俩还有区别呢：relative和 absolute。Relative定位就跟玩游戏似的，可以动来动去地调节top啊right啊left这些数值；但是别忘了，别乱调，否则可能会干扰到旁边的朋友们啦! absolute定位，是紧紧贴着non-static的爹或文档流，然后就安安静静待在那儿。这招效果很好，尤其适合搞特效呢!
想做网站？找个适合自己的走向方式，然后根据需要来进行设计就对了！别忘了在CSS里面用好那个叫做”定位”的属性，掌握好不同设定值的使用方法，这样做出来的网页不仅快，还好看。
评论0