relative:  相对定位

相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置。原来在标准流中的位置继续占有。

absolute: 绝对定位

相对于最近一级定位不为static的父元素进行定位。(子决父相)。

fixed: (老版本IE不支持)固定定位

相对于浏览器窗口或者frame进行定位 跟父元素没关系。不随着滚动条的滚动而移动。固定在浏览器可视窗口的位置。

static: 默认值,没有定位

元素出现在正常的文档流中。相当none 没有定位的意思。没有边偏移几乎不用

position: sticky; 基于用户的滚动位置来定位

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

position 的值, relative 和 absolute 分别是相对于谁进行定位的?的更多相关文章

  1. 关于position的relative和absolute分别是相对于谁进行定位的

    position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始 ...

  2. display值的作用分别是什么?relative和absolute分别是相对谁定位的?

    display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...

  3. CSS的position属性:relative和absolute

    relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...

  4. 定位position详解:relative与absolute

    定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...

  5. 一张图看懂css的position里的relative和absolute的区别

    position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...

  6. CSS里Postion几个取值relative、absolute、static、fixed的区别和用法

    ---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...

  7. 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  8. position 有五个值:static、relative、absolute、fixed、inherit。

    position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...

  9. 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?

    display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...

  10. position 的值absolute、fixed、relative和static的定位原点是什么

    position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...

随机推荐

  1. Win32 自绘控件按钮类

    今天学了控件的自绘,初步偿试了下,蹂躏的不行不行的,查了好多的资料,头都弄大了, 有好多还是没弄明白,只是初步实现一个按钮的基本功能,好难呀, 先看下效果: 按下状态 弹起状态 按钮2按下状态 按钮2 ...

  2. EXlucas

    \(EXLucas\) 扩展卢卡斯定理 ·题意 试求: \[C^{m}_n \mod P \ \ \ \ \ \ \ \ \ \ \ ( P \in N ^* ) \] 注意, \(P\) 非质数( ...

  3. Angular 学习笔记 language service

    尝试 v10 rc 的时候, 突然 language service 不 work 了. ctrl + shift + p -> Show logs... 这样可以检查和 report issu ...

  4. Asp.net core 学习笔记之 Microsoft Graph API

    早年如果我们要读写用户得 outlook 内容是比较麻烦的, 要用许多 smtp 之类的方式. 现在终于是有了 http 级的 API 可以 call 了. 不仅仅是 outlook, calenda ...

  5. Tomcat——idea集成本地Tomcat

    IDEA 集成本地Tomcat 添加配置      添加本地Tomcat服务器      配置本地Tomcat路径      部署项目             在 webapp 中添加一个简单的页面作 ...

  6. 心得小结,关于注重加强MCU下调试能力的意识

    这两个月没有怎么更新博文,最近换工作了,根据新工作安排,大半年内都做MCU开发(就不要叫单片机了,太老土了). 入职新工作了,需重构拳头产品的软件,所以每天加班加点. 单片机与linux应用开发,开发 ...

  7. 使用 fabric.js 开发移动端 H5 图片编辑器

    大家好,我是开源图片编辑器的 https://github.com/ikuaitu/vue-fabric-editor 的作者,它是一款基于 PC 版本的开源图片编辑器. 最近很多开发者咨询,是否可以 ...

  8. mac M1,M2,M3芯片踩坑 nodejs ruby brew

    问题&解决方法 先说解决方法, 感兴趣的可以了解事情的经过, 也许我描述的问题不专业, 但确实解决了当下的问题, 欢迎留言讨论 这里主要是两个问题, 一个是启用rosetta模式失败, 一个是 ...

  9. HuggingChat macOS 版现已发布

    Hugging Face 的开源聊天应用程序 Hugging Chat,现已推出适用于 macOS 的版本. 主要特点 Hugging Chat macOS 版本具有以下亮点: 强大的模型支持: 用户 ...

  10. gadget驱动框架(二)

    usb_composite_driver的创建于注册 源码:drivers/usb/legacy/serial.c //创建usb_composite_driver static struct usb ...