关于绝对定位与相对定位的区别和用法
程序员文章站
2022-04-24 22:41:12
...
Hello大家好,我们这次来详细说下关于绝对定位以及相对定位的知识。
- 相对定位及其用法
顾名思义相对定位的意思是相对于该控件相对于之前的位置进行偏。相对定位的css样式代码是这样的:position:relative;
前面的单词代表了相对定位的属性,后面的单词代表了相对定位的属性值。倘若我们不设置定位类型,那么它的默认值是这样的:position:static;
下面我们来举个例子:
css部分:
.d1{
height: 300;
width: 300px;
padding: 50px;
border: 1px solid black;
}
html部分:
<div class="d1">
<div class="d2"></div>
</div>
运行后我们会发现:黄色小方块距离边框有一段距离,这就假设了这个小方块相对于原文档流的位置,现在我们来看相对定位对它是怎样的影响,我们在css中加入以下相对布局代码:
.d2{
width: 50px;
height: 50px;
background-color:yellow;
position: relative;
left: 20px;
}
运行后我们会发现,黄色小方块相对于自己原来的位置向左偏移了20px,而不是相对与d1左边框进行的偏移,这就是相对定位。
- 绝对定位及其用法
绝对定位的意思是相对于该控件相对于整个浏览器的位置进行偏。绝对定位的css样式代码是这样的:position:absolute;
前面的单词代表了绝对定位的属性,后面的单词代表了绝对定位的属性值。它还有另一个属性值:position: fixed;
他俩的区别很简单:1、没有滚动条的情况下没有差异
2、在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动,我们平常在浏览网页是那“挥之不去”的小广告就是用的这种定位。倘若我们不设置定位类型,那么它的默认值是这样的:position:static;
下面我们来举个例子:
css部分:
.d1{
height: 300;
width: 300px;
padding: 50px;
border: 1px solid black;
}
html部分:
<div class="d1">
<div class="d2"></div>
</div>
运行后我们会发现:黄色小方块距离边框有一段距离,这就假设了这个小方块相对于原文档流的位置,现在我们来看绝对定位对它是怎样的影响,我们在css中加入以下代码:
.d2{
width: 50px;
height: 50px;
background-color:yellow;
position: absolute;
left: 20px;
}
运行后我们会发现,黄色小方块相对于自己原来的位置向左偏移了20px,而不是相对与d1左边框进行的偏移,这就是绝对定位。
5. 二者的区别
简单来说相对定位是根据自己原来的位置进行定位,绝对定位是根据整个浏览器进行定位,固定定位于绝对定位一样不过固定定位不随着屏幕的滚动而滚动。
6. 链接
如果上面的内容还是让你存有一些疑惑,那我们不如一起去看看官方的解答吧—>菜鸟教程。
上一篇: 纯CSS如何让图片以及DIV垂直居中显示
下一篇: CSS浮动使用(float)