首页 > 代码库 > 辛星和你彻底搞清CSS中的相对定位和绝对定位
辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题,无奈还是有些童鞋表示迷茫,于是另开一篇博客,来详细解读相对定位和绝对定位,希望能够以我的点点星光,让后来者少走弯路。
所谓相对定位,就是设置为相对定位的元素会偏移某个距离,元素仍然保持原来的样式,它会保留该HTML元素的空间,比如我们看如下代码:
.demo{ position: relative; width:50px; height: 50px; left:50px; }它会出现在相对原来的地方向右50px的地方,而它原来所在的地方为空。
下面说一下绝对定位,所谓绝对定位,即不占用空间,如果原来这个地方有HTML元素,那么就会重叠,这里需要特别之处的,也是我发这篇博文的目的,就是想告诉大家,绝对定位如果被父元素包含,如果父元素没有定位属性,它会根据body进行定位,因此,如果它有父元素,必须在父元素中指定定位属性,如下代码:
<html> <head> <title>辛星解读绝对定位和相对定位</title> <style type="text/css"> .father{ position: relative; width:300px; height: 300px; margin: 0 auto; border: 1px solid orange; } .sun{ position:absolute; background:purple; width:50px; height: 50px; left: 50px; } </style> </head> <div class = "father"> <div class = "sun"></div> </div> </html>
效果图:
可能有童鞋会问,如果我们不指定父元素的定位又会如何呢?请看下面代码,我把css代码中的哪一行给注释掉之后,源代码如下:
<html> <head> <title>辛星解读绝对定位和相对定位</title> <style type="text/css"> .father{ //position: relative; width:300px; height: 300px; margin: 0 auto; border: 1px solid orange; } .sun{ position:absolute; background:purple; width:50px; height: 50px; left: 50px; } </style> </head> <div class = "father"> <div class = "sun"></div> </div> </html>
然后是它的效果图:
以上就是我介绍的关于绝对定位和相对定位的问题,如果您有什么问题或者不解,可以在下面留言,谢谢。
辛星和你彻底搞清CSS中的相对定位和绝对定位
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。