关于绝对定位与相对定位的区别和用法

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中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一.绝对定位二.相对定位三.绝对定位与相对定位的区别四.绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些 ...
CSS中，position的绝对定位和相对定位的区别
CSS中,position的绝对定位和相对定位的区别 1.position的四个值:static.relative.absolute.fixed 绝对定位:absolute和fixed统称为绝对定位 ...
css中的定位以及绝对定位和相对定位的区别
一:绝对定位 (position: absolute) 绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是 ...
绝对定位和相对定位的区别（详解）
一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
绝对定位和相对定位的区别
相对定位与绝对定位相对定位绝对定位相对定位每一个元素都可以看作一个盒子,文档流就是由这些盒子堆砌而成,而每个盒子都在这个文档流中占据了一个位置,如果我们把这个盒子设置成相对定位,那么就可以拿起 ...
绝对定位和相对定位的区别？
一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
CSS position中绝对定位和相对定位的区别以及占位问题
!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS中的盒子 ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...

关于绝对定位与相对定位的区别和用法

关于绝对定位与相对定位的区别和用法相关推荐

最新文章

热门文章