CSS position属性的实际应用

最新推荐文章于 2024-09-10 18:37:52 发布

听雨等奇迹

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量232

点赞数 1

分类专栏： css 文章标签： css

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、absolute（绝对定位）

absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL）定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。具体案例如下：

html,body,div{
    margin: 0;
    padding: 0;
    list-style: none;
}

.center1{
    margin: 30px;
    border: #999999 solid 10px;
    width: 400px;
    height: 300px;
    background: #FFFF00;
}

.div1{
    width:200px;
    height:150px;
    background:#0099FF;
    position:absolute;
    top:0px;
    left:0px;
}
.div2{
    width:400px;
    height:150px;
    font-size:30px;
    font-weight:bold;
    color:#fff;
    background:#FF0000;
}

<div class="center1">
    <div class="div1"></div>
    <div class="div2">position:absolue定位测试</div>


</div>

效果如下：

 2、relative（相对定位）
relative是相对的意思，顾名思义就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。具体案例如下：
html,body,div{
    margin: 0;
    padding: 0;
    list-style: none;
}

.center1{
    margin: 30px;
    border: #999999 solid 10px;
    width: 400px;
    height: 300px;
    background: #FFFF00;
}

.div3{
    width: 200px;
    height: 150px;
    background: yellowgreen;
    position: relative;
    top:-20px;
    left: 20px;
}
.div2{    width:400px;    height:150px;    font-size:30px;    font-weight:bold;    color:#fff;    background:#FF0000;}
<div class="center1">
    <div class="div3"></div>
    <div class="div2">position:relative定位测试
</div>


</div>

效果如下：