CSS定位属性之相对定位relative属性怎么使用

这篇“CSS定位属性之相对定位relative属性怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS定位属性之相对定位relative属性怎么使用”文章吧。

成都创新互联专注于企业营销型网站、网站重做改版、武进网站定制设计、自适应品牌网站建设、H5建站商城建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为武进等各大城市提供网站开发制作服务。

CSS定位属性之相对定位relative属性怎么使用

CSS定位属性之相对定位relative属性详解

position:relative 相对定位详解

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。

相对定位的特点:

  • 它是相对于自己原来的位置来移动的(移动位置的时候参考点是自己原来的位置)

  • 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方对待它(不脱标,继续保留原来的位置)。因此相对定位并没有脱标,它最典型的应用是给绝对定位当爹的。

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

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

如下图所示:

CSS定位属性之相对定位relative属性怎么使用

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

示例如下:





Insert title here

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定位属性之相对定位relative属性怎么使用

相对定位对文档流的影响

代码示例:





Insert title here

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

输出结果:

CSS定位属性之相对定位relative属性怎么使用

以上就是关于“CSS定位属性之相对定位relative属性怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


分享名称:CSS定位属性之相对定位relative属性怎么使用
转载源于:http://myzitong.com/article/iigoej.html

其他资讯