CSS相对绝对定位总结

白小宇

已于 2022-04-02 01:48:49 修改

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端 CSS 文章标签： css 定位

于 2018-03-13 16:39:59 首次发布

本文链接：https://blog.youkuaiyun.com/b954960630/article/details/79542459

web前端同时被 2 个专栏收录

121 篇文章

订阅专栏

CSS

19 篇文章

订阅专栏

本文详细解析了CSS中的五种定位方式：relative、absolute、fixed、static和inherit的特点与应用。通过实例说明了各种定位如何影响元素的位置及文档流，并强调了它们在实际网页布局中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position：relative | absolute | fixed | static | inherit

没有定位：static
相对定位：relative
绝对定位：absolute、fixed

什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。(自上而下，自左向右)

在文档流的：relative、
未完全脱离文档流的：浮动
脱离文档流的：absolute、fixed

float 究竟有没有脱离文档流，为什么文字会围绕在float元素周围，而块状元素依然会忽略float元素？
只能说明：float 未完全脱离文档流。

一、解释

1、position: static

这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。不能使用top，bottom，left，right和z-index。

2、position: relative

（1）相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出）
就是：以自己作为参照，进行定位（即position为static时的位置）。

（2）且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。
www3school里的解释

3、position:absolute

（1）以最近的且不是static定位的祖先元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位(body)。可以使用top，bottom，left，right进行位置移动，亦可使用z-index在z轴上面进行移动。
（2）脱离文档流，不会占用页面空间。
（3）absolute使用margin时，不管它有没有已经定位的祖先元素，都会以它原来所在文档流中的位置作为参照。此时margin-top、margin-bottom不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。对于relative、absolute、fixed定位元素，使用 left、right、top、bottom属性与margin属性混合使用会产生累加效果。

4、position: fixed

position: fixed直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。

注意：
（1）对于relative、absolute、fixed定位元素，使用 left、right、top、bottom属性与margin属性混合使用会产生累加效果。
（2）像span这类inline元素，在普通文档流里是无法设置width和height的。
但如果将该span元素设置为 absolate、fixed 或 float后【relative不行】，inline元素将会自动转换为block元素, 因而此时再设置width和height就会生效。（这个block由于浮动或脱离文档流的原因，导致前后的换行符失去了效果，所以有些人误认为是转化为了inline-block）
（3）absolute定位对象在可视区域之外会导致滚动条出现。而放置relative定位对象在可视区域之外，滚动条不会出现。
（4）absolute定位忽略padding，相对位置为相对定位容器的左上角内边框
(见下图)

二、例子说事

例1、position: relative; left:0px(或right:0px)

<style>
*{margin: 0;padding: 0;}
#div{
  width: 300px;
  height: 300px;
  background:#ccc;
  position: relative;/*或者position: absolute;*/
  left: 50%;
  margin-left: -150px;
}
#div span{
  background: orange;
}
#child{
  position: relative;
  top:0;
  left: 0;/*换为right: 0;   输出效果一样*/
  background: green;
  width: 100px;
  height: 100px;
}
</style>

<body>
  <div id="div">
    <span>1dadada1</span>
    <div id=child></div>
    <a href="">asdasdasdadad</a>
  </div>
</body>

效果：
div#child的 left: 0 或 right: 0 ，输出都效果一样。
说明相对定位相对于其父级元素所剩余的未被占用的空间进行定位；以自己作为参照，进行定位（即position为static时的位置）

在这里插入图片描述

例2、position: relative; right:100px;
将例1代码修改为如下，其他不变。

#child{
  position: relative;
  top:0;
  right:100px;
  
  background: green;
  width: 100px;
  height: 100px;
}

效果：
说明相对定位相对于其父级元素所剩余的未被占用的空间进行定位(以自己作为参照，进行定位（即position为static时的位置）)；相对定位占用该元素在文档中初始的页面空间，且在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。

在这里插入图片描述

例3、position:absolute; left:0px;
将例1代码修改为如下，其他不变。

#child{
  position: absolute;
  top:0;
  left: 0;
  
  background: green;
  width: 100px;
  height: 100px;
}

效果：
说明其脱离文档流，不会占用页面空间。

例4、position:absolute; right:0px;
将例1代码修改为如下，其他不变。

#child{
  position: absolute;
  top:0;
  right: 0;
  background: green;
  width: 100px;
  height: 100px;
}

效果：
说明它是以最近的且不是static定位的父级元素作为参考进行定位的。

在这里插入图片描述

例5、position:absolute; top:60px;margin-top: 70px;

将例1代码修改为如下，其他不变。

#child{
  position: absolute;
  top:60px;
  left: 0;
  margin-top: 70px;
  background: green;
  width: 100px;
  height: 100px;
}

效果：
说明 absolute使用margin时，不管它有没有已经定位的祖先元素，都会以它原来所在文档流中的位置作为参照。此时margin-top、margin-bottom不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。对于relative、absolute、fixed定位元素，使用 left、right、top、bottom属性与margin属性混合使用会产生累加效果。
这里写图片描述

例6、position:fixed; right:0px;
将例1代码修改为如下，其他不变。

#child{
  position: fixed;
  top:0;
  right: 0;
  
  background: green;
  width: 100px;
  height: 100px;
}

效果：
说明position: fixed直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。
在这里插入图片描述

例7、position:fixed; top:10px;margin-top: 20px;
将例1代码修改为如下，其他不变。

#child{
  position: fixed;
  top:30px;
  left: 0;
  margin-top: 20px;
  background: green;
  width: 100px;
  height: 100px;
}

效果：说明对于relative、absolute、fixed定位元素，使用 left、right、top、bottom属性与margin属性混合使用会产生累加效果。
这里写图片描述

总结：

relative: 以自己作为参照，进行定位（即position为static时的位置）
absolute: 以最近的且不是static定位的父级元素作为参照，进行定位的
fixed: 以浏览器窗口作为参考，进行定位的

CSS相对绝对定位 总结

一、解释

1、position: static

2、position: relative

3、position:absolute

4、position: fixed

二、例子说事

CSS相对绝对定位总结