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. SpringBoot-RSA加密

    前言 最近由于工作业务的需要,需要对指定的字段信息进行非对称加解密:由于需要加密的内容过于庞大:自己执行程序会出现:Data must not be longer than 117 bytes 的异常 ...

  2. postgresql 开启审计日志

    1.审计清单说明 logging_collector     --是否开启日志收集开关,默认off,推荐on log_destination       --日志记录类型,默认是stderr,只记录错 ...

  3. vue3编译优化之“静态提升”

    前言 在上一篇 vue3早已具备抛弃虚拟DOM的能力了文章中讲了对于动态节点,vue做的优化是将这些动态节点收集起来,然后当响应式变量修改后进行靶向更新.那么vue对静态节点有没有做什么优化呢?答案是 ...

  4. java学习之旅(day.11)

    static详解 static若在类中使用,就是修饰成员变量 static若在方法中使用,就是成员方法? static加在方法上叫静态方法,加在属性上叫做静态属性 package com.zhang. ...

  5. Python:用Pandas输出格式化HTML并高亮

    输出格式化的HTML 我们已知一个DataFrame记录了模型Model1.Model2在3个Epoch优化中的精度变化情况: frame = pd.DataFrame({"Model1&q ...

  6. Django性能优化:提升加载速度

    title: Django性能优化:提升加载速度 date: 2024/5/20 20:16:28 updated: 2024/5/20 20:16:28 categories: 后端开发 tags: ...

  7. Chart.js (v2.9.4)概要介绍

    chart.js是一个非常优秀的开源图表插件,扩展非常灵活,同时也提供了大量的钩子函数,给与用户添加自定义插件,实现个性化的需求. 具体的优势特点,这里不详述,网上大把资料,现开始正式深入了解这个插件 ...

  8. 记一次Idea无法打开记录(idea升级)

    记一次Idea无法打开记录 前言,本来今天是打算升级Idea,然后体验一波的,结果升级完之后,发现无法打开idea(双击之后并没有任何打开的反应). 原因排查,打开idea所在目录,找到idea.ba ...

  9. lodash已死?radash库方法介绍及源码解析 —— 随机方法 + 字符串篇

    前言 大家好,我是阿瓜.一个励志想成为艾弗森的前端瓜 ~ 我们已经分享了 radash 库中数组.对象等相关的方法,大家感兴趣的可以前往主页查看阅读: 或许你最近在某个地方听过或者看过 radash ...

  10. SQL server查看触发器是否被禁用

    1 select a.name as 触发器名,b.name as 表名, 2 case a.is_disabled when 0 then '启用' when 1 then '禁用' else '未 ...