position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？

常见的position定位方式如下:

static 默认值。元素出现在正常的普通流中
relative 生成相对定位的元素，相对于其在普通流中的位置进行偏移。
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 iframe 进行定位。
inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
absolute 生成绝对定位的元素， 相对于最近一级的不是 static 的父元素来进行定位,如果没有找到的话，最终是根据body进行定位。

注意：
absolute定位的基准是相对于最近一级的不是默认值static的父元素(可以是absolute/relative/fixed等)来进行定位的，而不仅仅是相对于为position为relative的父级元素。父级元素还可以是absolute、fixed定位

absolute的定位基准不不仅仅是relative,还有absolute/fixed的，案例如下：
（下面content是absolute定位，在其外层套absolute/relative/fixed的定位方式，都可以作为absolute定位的基准）

效果如下：

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding:0;box-sizing: border-box;}.box_relative{width:300px;height:300px;position: relative;top: 100px;left: 100px;border: 1px solid gray;}.box_absolute{width:300px;height:300px;position: absolute;top: 100px;left: 500px;border: 1px solid gray;}.box_fixed{width:300px;height:300px;position: absolute;top: 100px;right: 100px;border: 1px solid gray;}.content{width:100px;height:100px;position: absolute;top: 100px;left: 100px;border: 1px solid gray;}</style></head><body><div class="box_relative">relative<div class="content">absolute</div></div><div class="box_absolute">absolute<div class="content">absolute</div></div><div class="box_fixed">fixed<div class="content">absolute</div></div></body>
</html>

sticky ，它会产生动态效果，很像relative和fixed的结合，一些时候是relative定位，另一些时候自动变成fixed定位，因此，它能够形成"动态固定"的效果
定位逻辑：
当页面滚动，父元素开始脱离浏览器视口时（即部分不可见），只要与sticky元素的距离(与浏览器窗口的距离)达到生效门槛，relative定位自动切换为fixed定位；
等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
用途：
网页的搜索工具栏，初始加载时在自己的默认位置（relative定位），页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。等到页面重新向上滚动回到原位，工具栏也会回到默认位置。

示例代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body {height: 2000px;/* 为父容器设置一个很大的高度，方便演示 */}#father {width: 600px;height: 100%;background: lightpink;margin: 100px auto 1000px auto;}nav {position: sticky;top:50px;width: 500px;height: 50px;background: #096;margin: 10px auto;}</style></head><body><main id="father">父元素<nav>导航栏</nav></main></body></html>

参考链接：https://shixtao.cn/article/36
参考链接：http://www.ruanyifeng.com/blog/2019/11/css-position.html

position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？相关推荐

position的值，以及absolute和relative的区别
在 CSS 中,元素的 position 属性有五种取值: static:默认值,元素按照正常的流动方式排列. relative:元素的位置相对于它在正常流中的位置进行定位. absolute:元素的 ...
CSS的position属性：relative和absolute
relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...
定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
细谈position属性:static、fixed、relative与absolute
更新时间:2019-07-24 09:21:38 学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就 ...
[css] position的relative和absolute定位原点是哪里？
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
relative和absolute的区别
这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层 ...
前端面试知识点-DOCTYPE、盒模型、css选择符、position的值、网络协议【小咚 “面筋” 记】
文章目录前言一.DOCTYPE的作用二.盒模型三.css选择符有哪些?优先级? 1.选择符 2.优先级四.position的值有哪些? 五.网络协议(OSI.TCP/IP) 总结前言每天 ...
CSSposition定位（relative、absolute、fixed、sticky）
这一周,我在逆战班学习了很多,具体介绍一下position相对定位和绝对定位,希望可以帮助到你. **position定位 ** position 的五个属性:static(默认).relative. ...

position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？

position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？相关推荐

最新文章

热门文章