在前端HTML开发中绝对定位和相对定位那点事

绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用leftrighttopbottom进行绝对定位。

上代码做个对比给你们看看

这是原来最初样式,里面我加了一个width:300px;height:200px的黑色大box,然后在里面加上了两个width:100px;height:200px;背景颜色分别为#ABBDFD的第一漂亮的DIV和#AB45ED的第二漂亮的DIV,并且添加了float:left浮动效果
代码:

<style>
.box{width:300px;height:200px;background:#333333;text-align: right;color:#FFFFFF}
.red{width:100px;height:200px;background:#ABBDFD;float:left;}
.yellow{width:100px;height:200px;background:#AB45ED;float:left;}
</style>
<div class="box">我是黑色大box
<p class="red">我是第一漂亮的DIV</p>
<p class="yellow">我是第二漂亮的DIV</p>
</div></br>
我是黑色大box

我是第一漂亮的DIV

我是第二漂亮的DIV


下面是黄色DIV只添加了position:relative定位的样式效果,外面在黄色DIV的css里面写入position:relative;top:50px

我是黑色大box

我是第一漂亮的DIV

我是第二漂亮的DIV



<style>
.box1{width:300px;height:200px;background:#333333;text-align: right;color:#FFFFFF;}
.red1{width:100px;height:200px;background:#ABBDFD;float:left;}
.yellow1{width:100px;height:200px;background:#AB45ED;float:left;position:relative;top:50px;}
</style>
<div class="box1">我是黑色大box
<p class="red1">我是第一漂亮的DIV</p>
<p class="yellow1">我是第二漂亮的DIV</p>
</div>

从上面外面大家可以看出position:relative;top:50px;这个定位是相对于黄色DIV原来位置基础上而做出的改变


我们接下来要做的是黄色DIV相对于最外面的黑色大box做出的位置改变

我是黑色大box

我是第一漂亮的DIV

我是第二漂亮的DIV



<style>
.box2{width:300px;height:200px;background:#333333;text-align: right;color:#FFFFFF;position:relative;}
.red2{width:100px;height:200px;background:#ABBDFD;float:left;}
.yellow3{width:100px;height:200px;background:#AB45ED;float:left;position:absolute;top:50px;}
</style>
<div class="box2">我是黑色大box
<p class="red2">我是第一漂亮的DIV</p>
<p class="yellow3">我是第二漂亮的DIV</p>
</div>

外面可以看到黄色DIV完全脱离的原来的位置,从黑色DIV左上角顶部做出了top:50px的改变原因是什么呢?
原因是外面给外面的黑色大box的css上添加了position:relative属性,给黄色DIV添加了position:absolute属性。


注意
1.我们不管是相对定位还是绝对定位,在position:relative属性后面只能设置top:50pxleft:50px这样的元素


position属性

属性属性描述
staticposition的默认值,相当于没有定位;不脱离普通流,占据页面空间
relative位置相对于自身的位置;不脱离文档流,占据页面空间
absolute位置相对于已定位的父级元素;脱离文普通流,不占据页面空间
fixed位置相对于浏览器窗口;脱离文档流,不占据页面空间

总结
1.要是想让你的元素在原来位置的基础上移动那就单独给他设置一个position:relative属性就可以了
2.要是想让某个区块相对于另外的一个区块移动,那就先给静止不动的那个区块给上position:relative属性,然后个你要相对于静止区块移动的那个区块添加一个position:absolute属性就可以了

最后修改:2019 年 08 月 10 日 05 : 04 PM
如果觉得我的文章对你有帮助,可以给我来杯卡布其诺

发表评论