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的第一个父元素进行定位,也可以理解为离自 ...
随机推荐
- SpringBoot-RSA加密
前言 最近由于工作业务的需要,需要对指定的字段信息进行非对称加解密:由于需要加密的内容过于庞大:自己执行程序会出现:Data must not be longer than 117 bytes 的异常 ...
- postgresql 开启审计日志
1.审计清单说明 logging_collector --是否开启日志收集开关,默认off,推荐on log_destination --日志记录类型,默认是stderr,只记录错 ...
- vue3编译优化之“静态提升”
前言 在上一篇 vue3早已具备抛弃虚拟DOM的能力了文章中讲了对于动态节点,vue做的优化是将这些动态节点收集起来,然后当响应式变量修改后进行靶向更新.那么vue对静态节点有没有做什么优化呢?答案是 ...
- java学习之旅(day.11)
static详解 static若在类中使用,就是修饰成员变量 static若在方法中使用,就是成员方法? static加在方法上叫静态方法,加在属性上叫做静态属性 package com.zhang. ...
- Python:用Pandas输出格式化HTML并高亮
输出格式化的HTML 我们已知一个DataFrame记录了模型Model1.Model2在3个Epoch优化中的精度变化情况: frame = pd.DataFrame({"Model1&q ...
- Django性能优化:提升加载速度
title: Django性能优化:提升加载速度 date: 2024/5/20 20:16:28 updated: 2024/5/20 20:16:28 categories: 后端开发 tags: ...
- Chart.js (v2.9.4)概要介绍
chart.js是一个非常优秀的开源图表插件,扩展非常灵活,同时也提供了大量的钩子函数,给与用户添加自定义插件,实现个性化的需求. 具体的优势特点,这里不详述,网上大把资料,现开始正式深入了解这个插件 ...
- 记一次Idea无法打开记录(idea升级)
记一次Idea无法打开记录 前言,本来今天是打算升级Idea,然后体验一波的,结果升级完之后,发现无法打开idea(双击之后并没有任何打开的反应). 原因排查,打开idea所在目录,找到idea.ba ...
- lodash已死?radash库方法介绍及源码解析 —— 随机方法 + 字符串篇
前言 大家好,我是阿瓜.一个励志想成为艾弗森的前端瓜 ~ 我们已经分享了 radash 库中数组.对象等相关的方法,大家感兴趣的可以前往主页查看阅读: 或许你最近在某个地方听过或者看过 radash ...
- SQL server查看触发器是否被禁用
1 select a.name as 触发器名,b.name as 表名, 2 case a.is_disabled when 0 then '启用' when 1 then '禁用' else '未 ...