频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
css中position:absolute和relative的知识点
2018-03-13 11:54:28      个评论    来源:?_#的博客  
收藏   我要投稿

几年前学习了css。。。一头雾水,从没弄懂过,也就不想弄了。最近是无聊,还是要学下的,去看了别人的博客,自己搞搞,以下内容都是自己推想的,或者有错误,敬请纠正。

先来看没加任何position的代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        #a{  
            margin: 0 auto;  
            height: 500px;  
            width: 500px;  
            background: #aeeee2;  
            z-index: -1;  
        }  
        #b{           
            height: 400px;  
            width: 300px;  
            background: purple;  
        }  
        #c{  
            height: 200px;  
            width: 200px;  
            background: blue;  
        }  
        #d{  
            height: 100px;  
            width: 100px;  
            background: black;  
        }  
  
    </style>  
</head>  
<body>  
    <p id="a">  
        <p id="b">  
            <p id="c">  
            <p id="d"></p>  
            </p>  
        </p>  
    </p>   
      
</body>  
</html>  

1.结果如图,这里很容易理解

\

2.然后是添加给#b紫色 添加 position: relative;和left:100px;,结果是

\

这里加了position:relative和left:100px;的紫色是相对了之前自己的位置改变了位置,left和margin-left类似吧。

3.再把蓝色加上position:relative;和top:100px;,如图结果也是可想而知,说明了position:relative; 是相对于之前自己的位置(在没加position的父元素里面)而言(其他情况欠考虑)。

\

4.这里把黑色position设为absolute,同时加上right:0(贴在右边); 看到结果是这样

\

知道了黑色位置是相对蓝色(父元素)而言的,这里注意蓝色的position是relative。

5.当我们把蓝色的position设为static(默认,即删除掉position属性)时,结果是黑色贴在紫色右边,而蓝色是去掉position的位置

\

为什么?因为absolute是相对于非static的其他position值而言的。黑色的祖先中有relative,则相对于这个祖先(紫色)而言。

6.当我们把紫色的relative改为static会出现什么情况?

\

竟然跑出了a,b,c(此时a,b,c的p都是默认static的position(即删除position属性)),跑到了body。那只能说body是界限了喔。。。

点击复制链接 与好友分享!回本站首页
上一篇:vuetransition1.0到2.0的迁移,饿了么demo填坑攻略
下一篇:vue插件开发之使用pdf.js实现手机端在线预览pdf文档
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站