CSS相对定位搞起来！玩转元素自由移动

相对定位的基本概念

你们肯定知道css里有个相对定位。这玩意儿能随便拉拽元素，但是别忘了看清楚它原来坐哪儿哈。也就是说，就算你把他搬到其他地方，转个圈或者怎么着，也丝毫不影响它原本的样子大小和位置。这么一说，咱们在玩网页设计的时候可就能随心所欲地搞了

相对定位很棒，之前占的位子不因换位置而变没，超省心。无论你怎么移动带相对定位的东西，其他地方都不受影响，真是特方便，难怪在版面设计这么常用！

如何使用相对定位

想让元素动起来？先别忘给它换成absolute的CSS操作！接着，利用top、right、bottom、left四兄弟就能调节位移了。比如说把top调成20像素，那元素就往下趾着走20个像素；至于左边，左移30像素就让它向右挪出30像素。

听说过’相对定位’么？它可以帮你调整元素在x轴、y轴的偏移位置，随心所欲地移动页面布局。是不是很神奇？有了这个功能，我们就可以轻松打造出各种各样好看又实用的网页！

示例演示

理解相对定位咋整？给你举个小例子！比如，你在网页弄了个div，放在左上角没错？接着给它加了position: relative再配上top: 50px和left: 100px。这样的话，它就向下挪了50像素，还跑到右边缘100像素的地方！

#box_relative {    position: relative;    left: 30px;    top: 20px;  }

说白了，定位不就是让那些东西在保持在整体布局里的情况下动起来么？这个技巧可是挺好用的，因为有时候咱们需要调整某些物品的位置，但可不能打破原本的大框架。

文档流与相对定位

你们知道CSS那啥“文档流”吗？简单来说，就是利用大括号元素和井字号元素把网页空间照应得整整齐齐，跟排版似的，占据页面的地盘儿。不过你要是用上了相对定位，那就不用care这个文档流了，因为它不影响喔~

相对定位就是稍微挪动一下，但面积不变，这样就不用担心其他东西会挤压或混乱了，页面会显得清清爽爽。

结合其他属性应用

别只知道上下左右，再加点其他css属性就更好玩了。比如说那个z-index，就是看哪个元素遮住哪個元素呢；然后那个 transition，就是让屏幕滑动过渡更顺畅。这样一来，网页不光简洁明了，还好玩多了对？

body{
    margin:10px;
    font-size:12px;
    font-family:Arial;
}
.outside{
    width:1000px;
    height:600px;
    background-color:#a9d6ff;
    border:1px dashed black;
}
 
.inside{
    padding:10px;
    background-color:#fffcd3;
    border:1px dashed black;
    margin: 10px;
}
 
.inside1{
    margin:10px;
    padding: 10px;
    background-color:#fffcd3;
    border:1px dashed black;
    /* 设置相对定位 ,相对点是当前div的原始位置的左上角*/
    position: relative;
    /* 距离div的原始位置的左边框 */
    left:20px;
    /* 距离div的原始位置的上边框 */
    top:30px;
    /*
       right距离div的原始位置的右边框
       bottom距离div的原始位置的下边框
    */
}




    
div1
    
div2

告诉你相对定位真的是响应式设计里面不可或缺的一环！比如说，电脑屏幕大小变化了的话，一些元素就能自动换位置，特别省事儿！所以说，搞网站开发的话，学会用相对定位就很关键了哟。

总结与展望

只要搞懂这个文章，你们也能学会什么叫相对定位！超厉害的东东，轻轻松松就可以随意摆布页面里的东西，而且还不会影响原来的顺序哟。

制作网站的时候，搞定相对定位就行！这样网页好看、好用还能满足各种布局要求~你说网络会不会变得更强大？肯定有更多精彩又实用的功能等着咱们去发掘

详解下如何用好CSS的相对定位技巧，让日常工作学习更加溜~

body{
    margin:10px;
    font-size:12px;
    font-family:Arial;
}
.outside{
    width:1000px;
    height:600px;
    background-color:#a9d6ff;
    border:1px dashed black;
}
 
.inside{
    padding:10px;
    background-color:#fffcd3;
    border:1px dashed black;
    margin: 10px;
    position:relative;
    left:30px;
    top:30px;
    /* div1相对定位脱离了文档流，
        但是后续的div还会认为div1是在没有相对定位之前的状态
        所有后续的div不会填补div1的空缺位置，而是继续按照文档流来排序    
    */
}
 
.inside1{
    margin:10px;
    padding: 10px;
    background-color:#fffcd3;
    border:1px dashed black;
}




    
div1
    
div2

。