便宜vps推荐!

CSS的相对定位 -详细讲解

时间:|浏览:| 评论 ()

CSS的相对定位:

一.基本概念:

顾名思义,此种定位是相对某一个对象进行的偏移,相对定位并不能使对象脱离文档流,尽管它的位置可能产生偏移,但是对象初始位置仍然会被保留。

如果要真正掌握此种定位方式,搞清楚需相对于哪个对象进行偏移是关键点。

二.如何将一个元素设置为相对定位:

当一个对象的position属性值被设置为relative的时候就会发生相对定位:

  position:relative

三.定位参考对象:

可以使用top属性和left属性设置相对定位对象的偏移量。

相对定位的偏移参考对象是此对象本身。

代码实例:

首先看一个没有使用定位的代码实例:

 

<!DOCTYPE html> 
<html> 
<head> <meta charset=" utf-8"> 
<title>CSS相对定位</title>
<style type="text/css"> 
.father{ width:400px; height:400px; background-color:green; margin:50px; }
.first{ width:100px; height:100px; background-color:red }
.second{ width:100px; height:100px; background-color:blue }
</style> 
</head> 
<body> 
<div class="father"> 
<div class="first">
</div> 
<div class="second">
</div> 
</div> 
</body>
</html>

 

在以上代码中,所有的对象都没有采用相对定位,这里无须多介绍了。

再来看一段采用相对定位的代码:

<!DOCTYPE html> 
<html>
<head> <meta charset=" utf-8">
<title>CSS相对定位</title> 
<style type="text/css"> 
.father{ width:400px; height:400px; background-color:green; margin:50px; } 
.first{ width:100px; height:100px;
background-color:red; position:relative; left:20px; top:30px; } 
.second{ width:100px; height:100px; background-color:blue }
</style> 

</head>
<body> 
<div class="father">
<div class="first">
</div> 
<div class="second">
</div> 
</div>
</body>
</html>

在以上代码中,first元素采用了相对定位,并产生偏移,偏移是以对象没有产生偏移前的位置为参考的。同时也可以看出,first元素的偏移前的位置依然会被保留,它周边的元素不能够占据。

特别说明:定位元素经常与z-index属性一起使用,具体我们可以参阅CSS的z-index属性用法详解

标签:css 相对定位
声明:VPSNO仅为VPS服务器信息分享,任何IDC都有倒闭和跑路可能,本站无法作任何保障,请网友购买前自行斟酌,衡量评估风险,自负责任。数据勤备份是最佳选择。本文由VPSNO网站发布,转载请保留链接:《CSS的相对定位 -详细讲解》站长联系QQ:22⑧2六8⑦肆8,邮箱为QQ邮箱。
网友评价
评论列表
共有 条评论

精选便宜VPS - VPS排行

  • No.1 最便宜的大厂云服务器
    UCloud云服务器

    UCloud云服务器

    UCloud(优刻得)是国内最大的中立公有云服务商,全球包含香港、台湾共25个数据中心,52元/年起

  • No.2 国内用户最多的云服务器
    阿里云服务器

    阿里云服务器

    阿里云是国内云服务器第一梯队头部商家,目前国内用户选择最多的云服务器商。

  • No.3 号称“良心云”的云服务器
    腾讯云服务器

    腾讯云服务器

    和阿里云规模相当的国内云服务器商,套路少,给100%CPU资源,拥有更好的性价比。

  • 热度飙升最快的国外VPS
    RackNerd

    RackNerd

    RackNerd是2019年成立的主机商,以提供便宜VPS、大带宽VPS闻名,近年来在国内用户中知名度颇高。

  • 最受国人欢迎的国外VPS
    bandwagonhost搬瓦工

    bandwagonhost搬瓦工

    搬瓦工VPS可能是中国用户数量最多的服务商,专为大陆用户定制了大量功能,线路有特别优化,快而稳定。

  • 实力雄厚的老牌国外VPS
    vultr

    vultr

    Vultr是成立于2014年的老牌IDC,全球16个机房,硬件配置极高,新用户注册赠送100美元余额。