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

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. ansible(14)--ansible的get_url模块

    1. get_url模块 功能:通过互联网下载软件至被控端本地: 主要参数如下: 参数 说明 url 资源文件在互联网上的具体url地址 dest 文件下载位置的绝对路径 mode 文件下载位置的绝对 ...

  2. GaussDB细粒度资源管控技术透视

    本文分享自华为云社区<[GaussTech速递]技术解读之细粒度资源管控>,作者:GaussDB 数据库. 背景 对数据库集群内资源管控与资源隔离一直是企业客户长久以来的诉求.华为云Gau ...

  3. [从零学习C++][01]如何在Clion中定义多个main函数

    在一个Clion项目中定义多个main函数编译的时候会报这个错误 显示就是main函数重复了,查阅了下好像可以通过修改CMakeList.txt来修改,将其定义成两个独立的executable即可 a ...

  4. C 语言编程 — 输入/输出与文件操作

    目录 文章目录 目录 前文列表 输入/输出 scanf() 和 printf() getchar() 和 putchar() 文件操作 打开文件 关闭文件 写入文件 读取文件 二进制 I/O 函数 前 ...

  5. Nokia 5GC 产品概览

    目录 文章目录 目录 Nokia SR OS Nokia NSP NFM-P Nokia 7750 SR-MG 5G User Plane Forwarding Mobile Gateway Non- ...

  6. typora不支持mermaid 问题记录

    typora不支持mermaid 问题记录 注意: 使用不了最新版本js,目前我测的最高版本9.3,有些复杂的图表不能用,不过已经满足我使用的需求了.知足了 本文只做记录,如有问题请联系删除!!!感谢 ...

  7. Typora导出html图片转base64

    Typora 导出html图片转base64 Typora 中图片使用绝对路径 图片路径不要使用中文,否则可能会不成功 打包 jar ,jar放在到出 html 同级目录下 必须要有 jdk 环境 一 ...

  8. Istio(八):istio安全之认证,启用mTLS

    目录 一.模块概览 二.系统环境 三.istio认证 3.1 证书创建与轮换 3.2 对等认证和请求认证 3.2.1 对等认证 3.2.2 请求认证 3.3 mTLS 3.3.1 双向 TLS 3.3 ...

  9. 视觉族: 基于Stable Diffusion的免费AI绘画图片生成器工具

    视觉族是一款基于Stable Diffusion文生图模型的免费在线AI绘画图片生成器工具,可以使用提示关键词快速生成精美的艺术图片,支持中文提示.无论你是想要创作自己的原创作品,还是想要为你的文字增 ...

  10. 直播相关-搭建直播流服务器nodejs

    一.安装nodejs环境 去nodejs官方网站下载安装包 https://nodejs.org/en/#download 安装完成之后测试: LUNLI-MC1:~ lunli$ node -v v ...