[err:标签'取得节点名称带链接'模板转换错误,原因:扩展函数不能返回空值。]

开发攻略

您的位置:首页>建站攻略>开发攻略>详细内容

开发攻略

再说CSS里面position:relative与position:absolute

录入: 发布时间:2020年04月21日 已阅读: 【字体: 保护视力色:

relative( 相对的)。absolute( 绝对的)。

当Position属性值为relative时,对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置。

top的值表示对象相对原位置向下偏移的距离,bottom的值表示对象相对原位置向上偏移的距离,两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离,right的值表示对象相对原位置向左偏移的距离,两者同时存在时,只有left起作用。

具体来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为三种情况进行说明

   1. 包含关系:父级relative,子级absolute;
   2. 包含关系:父级absolute,子级relative;
   3. 并列关系:兄弟标签都是relative;

1.最具常见的用法就是父级标签relative,子级标签position来做到无论浏览器如何改变,都是相对浏览器的定位。

css:
#a{
    height:200px;
    width:200px;
    position: relative;
    background-color:red;
    left:50px;
    top:50px;
}
#b{
    height:50px;
    width:50px;
    position: absolute;
    background-color:green;
    left:20px;
    top:20px;
}
html:
<div id = "a">a
    <div id = "b">b
    </div>
</div>



2.正常情况下同1的效果,不过需要注意的是,当标签中包含文字时,relative会发生调整。


3.当不存在父级元素包裹时,relative的相对位置是根据最近的一个兄弟作为参考的。

css:
#a{
    height:200px;
    width:200px;
    position: relative;
    background-color:red;
}
#b{
    height:200px;
    width:200px;
    position:relative;
    background-color:green;
    left:50px;
    top:50px;
}
html:
<div id = "a">
</div>
<div id = "b">
</div>


但当a标签也设置了left、top等相关属性时,兄弟标签b继续以a变化前作为参考相对位置。

css:
#a{
    height:200px;
    width:200px;
    position: relative;
    background-color:red;
    left:50px;
    top:50px;
}
#b{
    height:200px;
    width:200px;
    position:relative;
    background-color:green;
    left:20px;
    top:20px;
}
html:
<div id = "a">
</div>
<div id = "b">
</div>

【打印正文】