position 的值, relative 和 absolute 分别是相对于谁进行定位的?
relative: 相对定位
相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置。原来在标准流中的位置继续占有。
absolute: 绝对定位
相对于最近一级定位不为static的父元素进行定位。(子决父相)。
fixed: (老版本IE不支持)固定定位
相对于浏览器窗口或者frame进行定位 跟父元素没关系。不随着滚动条的滚动而移动。固定在浏览器可视窗口的位置。
static: 默认值,没有定位
元素出现在正常的文档流中。相当none 没有定位的意思。没有边偏移几乎不用。
position: sticky; 基于用户的滚动位置来定位
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
position 的值, relative 和 absolute 分别是相对于谁进行定位的?的更多相关文章
- 关于position的relative和absolute分别是相对于谁进行定位的
position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始 ...
- display值的作用分别是什么?relative和absolute分别是相对谁定位的?
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- CSS的position属性:relative和absolute
relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
- 一张图看懂css的position里的relative和absolute的区别
position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...
- CSS里Postion几个取值relative、absolute、static、fixed的区别和用法
---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...
- 前端~定位属性position(relative、absolute、fixed)的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
- position 有五个值:static、relative、absolute、fixed、inherit。
position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...
- 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?
display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...
- position 的值absolute、fixed、relative和static的定位原点是什么
position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...
随机推荐
- Win32 自绘控件按钮类
今天学了控件的自绘,初步偿试了下,蹂躏的不行不行的,查了好多的资料,头都弄大了, 有好多还是没弄明白,只是初步实现一个按钮的基本功能,好难呀, 先看下效果: 按下状态 弹起状态 按钮2按下状态 按钮2 ...
- EXlucas
\(EXLucas\) 扩展卢卡斯定理 ·题意 试求: \[C^{m}_n \mod P \ \ \ \ \ \ \ \ \ \ \ ( P \in N ^* ) \] 注意, \(P\) 非质数( ...
- Angular 学习笔记 language service
尝试 v10 rc 的时候, 突然 language service 不 work 了. ctrl + shift + p -> Show logs... 这样可以检查和 report issu ...
- Asp.net core 学习笔记之 Microsoft Graph API
早年如果我们要读写用户得 outlook 内容是比较麻烦的, 要用许多 smtp 之类的方式. 现在终于是有了 http 级的 API 可以 call 了. 不仅仅是 outlook, calenda ...
- Tomcat——idea集成本地Tomcat
IDEA 集成本地Tomcat 添加配置 添加本地Tomcat服务器 配置本地Tomcat路径 部署项目 在 webapp 中添加一个简单的页面作 ...
- 心得小结,关于注重加强MCU下调试能力的意识
这两个月没有怎么更新博文,最近换工作了,根据新工作安排,大半年内都做MCU开发(就不要叫单片机了,太老土了). 入职新工作了,需重构拳头产品的软件,所以每天加班加点. 单片机与linux应用开发,开发 ...
- 使用 fabric.js 开发移动端 H5 图片编辑器
大家好,我是开源图片编辑器的 https://github.com/ikuaitu/vue-fabric-editor 的作者,它是一款基于 PC 版本的开源图片编辑器. 最近很多开发者咨询,是否可以 ...
- mac M1,M2,M3芯片踩坑 nodejs ruby brew
问题&解决方法 先说解决方法, 感兴趣的可以了解事情的经过, 也许我描述的问题不专业, 但确实解决了当下的问题, 欢迎留言讨论 这里主要是两个问题, 一个是启用rosetta模式失败, 一个是 ...
- HuggingChat macOS 版现已发布
Hugging Face 的开源聊天应用程序 Hugging Chat,现已推出适用于 macOS 的版本. 主要特点 Hugging Chat macOS 版本具有以下亮点: 强大的模型支持: 用户 ...
- gadget驱动框架(二)
usb_composite_driver的创建于注册 源码:drivers/usb/legacy/serial.c //创建usb_composite_driver static struct usb ...