position的值, relative和absolute分别是相对于谁进行定位的?
relative: 相对定位,相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置,在走100px。原来在标准流中的位置继续占有。
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的第一个父元素进行定位,也可以理解为离自 ...
随机推荐
- uniapp获取用户信息
新接口getUserProfileFn内置login,如果必须要login返回的参数要隔离开 vue3书写要对按钮配置属性 <button @click="logintou" ...
- 厉害了!12秒将百万数据通过EasyExcel导入MySQL数据库中
一.写在开头 我们在上一篇文章中提到了通过EasyExcel处理Mysql百万数据的导入功能(一键看原文),当时我们经过测试数据的反复测验,100万条放在excel中的数据,4个字段的情况下,导入数据 ...
- 5GC 关键技术之 SBA(基于服务的软件架构)
目录 文章目录 目录 前文列表 5GC 的关键技术 SBA(基于服务的软件架构) 微服务架构 NF 的模块化 NF Service 的服务化 前文列表 <简述移动通信网络的演进之路> &l ...
- Istio(七):ServiceEntry,sidecar,Envoy Filter
目录 一.模块概览 二.系统环境 三.ServiceEntry 四.sidecar 4.1 Sidecar 4.2 工作负载选择器 4.3 入口和出口监听器 五.Envoy Filter 5.1 En ...
- mac for docker访问宿主机服务
转载链接 https://blog.csdn.net/weixin_33860528/article/details/91461648
- 8.14考试总结(NOIP模拟39)[打地鼠·竞赛图·糖果·树]
一举一动,都是承诺,会被另一个人看在眼里,记在心上的. T1 打地鼠 解题思路 数据范围比较小,不需要什么优化. 直接二维前缀和枚举右下角端点就好了. code #include<bits/st ...
- cors解决跨域 服务器代理方式
// cors 方法 // 后端程序员通过定义后端程序,让跨域访问,可以正常执行,可以获取响应体内容 // 前端程序员不需要做任何的调整 // 后端程序 ...
- ETL工具-nifi干货系列 第十七讲 nifi Input Port&Out Port 实战教程
1.端口(Port),包含输入端口(Input Port)和输出端口(Out Port ) 使用一个或多个处理组构建的数据流需要一种方式将处理组连接到其他数据流组件. 处理组和处理组之间可以通过使用端 ...
- kettle从入门到精通 第二十七课 邮件发送
1.我们平常在做数据同步的时候,担心转换或者job没有正常运行,需要加上监控机制,这个时候就会用到邮件功能. 下图是一个简单的测试邮件发送功能的转换.在kettle.properties文件中设置邮件 ...
- Easysearch:语义搜索、知识图和向量数据库概述
什么是语义搜索? 语义搜索是一种使用自然语言处理算法来理解单词和短语的含义和上下文以提供更准确的搜索结果的搜索技术.旨在更好地理解用户的意图和查询内容,而不仅仅是根据关键词匹配,还通过分析查询的语义和 ...