资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS中的relative怎么用

这篇文章主要介绍CSS中的relative怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

员工经过长期磨合与沉淀,具备了协作精神,得以通过团队的力量开发出优质的产品。创新互联坚持“专注、创新、易用”的产品理念,因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都网站建设、网站建设、微信公众号开发、电商网站开发,成都小程序开发,软件按需开发网站等一站式互联网企业服务。

首先我们来简单看一下relative(相对)定位的概念

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

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

看完了cssrelative(相对)定位的概念后,我们就来详细说一说relative的用法

对于相对定位在css中我们都这样使用:position:relative;

我们先来看一个例子

h3.pos_left

{

position:relative;

left:-20px

}

h3.pos_right

{

position:relative;

left:20px

}

这是位于正常位置的标题

这个标题相对于其正常位置向左移动

这个标题相对于其正常位置向右移动

效果如下:

360截图20181105105914007.jpg

看完了上述的例子我们大概知道了相对定位的一个简单的用法,接下来我们就来看看相对定位的其他用法。

relative对absolute的限制作用

我们知道,absolute定位的是其第一个祖先元素定位属性不为static属性,如果没有relative或者fixed定位的情况下,给absolute添加top/left、right/bottom等属性可以发生偏移,但是如果给父元素添加position:relative之后,则absolute的偏移能力被父元素限制住了。

relative对overflow的限制作用

我们来看一个例子:

.box{

overflow:hidden;

width:50px;

height:50px;

background-color:#dddddd;

}

.son{

position:absolute;

width:100px;

height:100px;

background-color:#cd0000;

}

在这个例子中,.box的宽和高都是50px,而.son元素的宽和高都是100px,虽然.box元素设置了overflow:hidden,但依然限制不了.son元素的大小,其宽和高都是100px,而当.box设置了定位属性relative后,.son元素的宽和高就变成了50px。

relative对层级z-index的限制作用

页面中的俩个absolute的z-index不同,有各自的层级,当这两个absolute的父类都有relative的时候,它们的层级就依赖于父类的relative的z-index。

以上是“CSS中的relative怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


分享名称:CSS中的relative怎么用
文章链接:http://cdkjz.cn/article/piogcc.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220