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. Java中Future 用来做异步任务返回

    我们在开发中会有这种场景,我们要调用远程服务的一个方法,并且拿到返回值去使用.笔者最近项目中出现了一个ANR,具体是调用了远程服务,发生异常一直没有返回值,然后导致ANR. 怎么解决呢?找了一圈,发现 ...

  2. android中Room数据库的基本使用

    简介: 还在使用原生的sqllite?有这么清爽且稳如狗的room为啥不用呢? Room是Google官方推荐使用的数据库,相比较某些优秀数据库框架来说,不用过于担心某天库会停止维护,且访问数据库非常 ...

  3. C语言:生成单词列表----使用单链表实现

    解决之前用结构体数组导致内存过剩问题,使用动态分配内存优化单词列表. txt文本内容不允许出现其他字符形式,这个仅限于判断在txt网页文件已经删除了超链接等,文本里面只允许出现单词才能进行判断和进行单 ...

  4. redis三主三从集群快速搭建

    redis集群快速搭建 1 本文以redis6.2.6版本为例,快速搭建一套三主三从的redis集群,已经提前将脚本写好,只需要在节点上面进行执行即可安装 #!/bin/bash install_re ...

  5. OpenOCD + DAP-LINK调试ESP32的失败经历

    目的 手里有调试STM32的DAP-LINK,想试试通过JTAG调试ESP32 OpenOCD支持CMSIS-DAP DAP-LINK支持的芯片,我手上这款描述如下,应该JTAG协议的都支持 平台 w ...

  6. AI实战 | 手把手带你打造校园生活助手

    大家好,我是努力的小雨.最近,我开始将我的经验逐渐分享到B站,希望能够帮助大家通过扣子助手真正解决一些问题.最近有粉丝提出了一个需求,为了满足大家的期待,我已经制作了视频,详细介绍了这个助手的搭建思路 ...

  7. 记一次 .NET某工控WPF程序被人恶搞的 卡死分析

    一:背景 1. 讲故事 这一期程序故障除了做原理分析,还顺带吐槽一下,熟悉我的朋友都知道我分析dump是免费的,但免费不代表可以滥用我的宝贵时间,我不知道有些人故意恶搞卡死是想干嘛,不得而知,希望后面 ...

  8. 论elasticsearch在Windows环境的安装

    前置需求 一台电脑(我用的是Windows),有网 第一步:下载并安装 去java官网下载开发版java(考虑到可能有小白,我暂且这么说) java官网下载链接:https://www.oracle. ...

  9. 基于docker的cicd

    基于docker的cicd 飞书链接: https://dlk2qiw7lh.feishu.cn/docs/doccnyu14HTaamVzASIXreCSNjf 相关软件 链接:https://pa ...

  10. 鸿蒙HarmonyOS实战-ArkTS语言基础类库(概述)

    一.概述 1.什么是语言基础类库 语言基础类库,也称为标准库或核心库,是编程语言提供的一组内置的基础功能和常用工具的集合.它通常包含了各种数据结构.算法.输入输出处理.字符串处理.日期时间处理.文件操 ...