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. zabbix snmp OID 列表

    系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...

  2. springboot踩坑&问题记录

    常见错误 莫名其妙 classes/:na 前往查看.yml 的配置问题 2.驼峰命名 是因为又用了xml配置,又在yml配置文件中用了mybatis的configuration配置,两个冲突了,不是 ...

  3. 微信小程序 BLE 基础业务接口封装

    写在前面:本文所述未必符合当前最新情形(包括蓝牙技术发展.微信小程序接口迭代等). 微信小程序为蓝牙操作提供了很多接口,但在实际开发过程中,会发现隐藏了不少坑.目前主流蓝牙应用都是基于低功耗蓝牙(BL ...

  4. C++ 项目目录结构

    目录结构 project_root/ ├── bin/ # 可执行文件目录 │ ├── my_app # 可执行文件 │ └── ... # 其他可执行文件或脚本 │ ├── build/ # 编译产 ...

  5. Python if __name__ == "__main__" 解释

    一种机制,允许脚本以不同的方式运行,这取决于作为独立的程序执行还是作为模块被其他脚本导入.这种机制就是 if __name == "__main__" 其作用是控制某些代码块只在该 ...

  6. HarmonyOS NEXT未成年人模式无缝联动所有应用,过滤非适龄内容

    背景 随着消费电子产品和移动互联网的普及,未成年人互联网普及率96.8%,超过80%的未成年人都拥有自己的上网设备,而如何引导孩子正确上网一直是家长们的担忧.市场上很多电子设备.系统推出了一些未成年人 ...

  7. Allen基因图谱:python Aabgen的安装

    1. abagen 使用教程的官方链接:abagen: A toolbox for the Allen Brain Atlas genetics data - abagen 0.1.3-doc+0.g ...

  8. 性能、成本与 POSIX 兼容性比较: JuiceFS vs EFS vs FSx for Lustre

    JuiceFS 是一款为云环境设计的分布式高性能文件系统.Amazon EFS 易于使用且可伸缩,适用于多种应用.Amazon FSx for Lustre 则是面向处理快速和大规模数据工作负载的高性 ...

  9. 【LLM训练系列】从零开始训练大模型之Phi2-mini-Chinese项目解读

    一.前言 本文主要是在复现和实践Phi2-mini-Chinese后,简要分析下Phi2-mini-Chinese这个项目,做一个学习实战总结. 原文发布于知乎:https://zhuanlan.zh ...

  10. git 回退之前某次提交

    git 版本回退,用于误提交或者版本回退 一.回滚到之前的某次版本,且该版本后的提交都不要(用于版本回退) 1).首先查看版本号,用 git log 命令查看要回退的版本对应的commit Id co ...