前端~定位属性position(relative、absolute、fixed)的分析

1,简单了解:

relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute),作为定位的基准点(参照物)

absolute: 随参照物的变化而变化

fixed:固定

2,position 是否会被内部的子元素继承?

一般不能继承的属性,像盒模型,border、margin、padding等

注意事项:当使用了滚动组件(例如better-scroll)时,跟better-scroll 同层的组件可能需要设置一下positon属性,

因为有可能better-scroll局部的滚动范围会影响到该组件。

3,父级元素(position 是 relative)加入滚动条,子元素(position是 fixed)或 (position 是 absolute)的差异:

fixed:固定 ,位置不变,即使有滚动条,依然不变位置。

absolute:是参考父级元素的位置,父元素位置改变,它相应的改变。

4,属性值relative 和 absolute 的区别:

(1)是否脱离文档流: relative 不会脱离, absolute 会脱离

(2)对象可否层叠(就是对象原来的位置是否还被占据):

  □ relative它是以自己本身所在位置进行偏移的,relative的对象被移出了原来的位置后,

  注意:他原来的位置还属于它的,别的元素不能替代它原来的位置. 

  □absolute以最近一层relative的父级元素对象作为定位基准点,进行移动位置,

  当absolute对象移出了原来的位置,那么他原来的位置也就不存在了, 其他元素可以占领它的位置。

 

5,专业解释relative:

相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。

同样可以用z-index分层设计。

前端~定位属性position(relative、absolute、fixed)的分析的更多相关文章

  1. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  2. 对于position:relative,absolute,fixed的见解:

    1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相 ...

  3. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  4. z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...

  5. css的定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  6. CSS之定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  7. What is the difference between position: static,relative,absolute,fixed

    What is the difference between static,relative, absolute,fixed we can refer to this link: expand

  8. 定位属性position

    定位属性position小结 1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...

  9. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

随机推荐

  1. Win10强制程序高DPI缩放设置

    起因 工作原因,需要在win10上安装数个古老vc版本(vc6,vc2008,vc2010),但是显示器是2K的,DPI缩放有问题 尝试 VC6比较好解决:右键,属性,兼容性,更改高DPI设置,勾选替 ...

  2. 利用docker-compose快速部署测试用数据库服务器

    起因 开发中经常需要快速部署一台随用随关的数据库服务器,如mysql,oracle,mongodb,elastic-search 尝试 一直觉得docker特别方便,加上docker-compose. ...

  3. 我眼中的java线程池实现原理

    最近在看java线程池实现方面的源码,在此做个小结,因为网上关于线程池源码分析的博客挺多的,我也不打算重复造轮子啦,仅仅用纯语言描述的方式做做总结啦! 个人认为要想理解清楚java线程池实现原理,明白 ...

  4. Python - 详解 range()

    介绍 range 是一个类,不是函数 表示不可变的数字序列,通常用于在 for 循环中循环指定的次数 两种语法格式 range(stop) 表示区间 [0, stop) 内的整数序列 该区间从 0 开 ...

  5. XSS靶机

    第一关 localhost:8083/xss/level1.php?name=test<script>alert(1)</script> 第二关 源码 文本框输入js代码,查看 ...

  6. VSCode远程免密登录

    VSCode远程免密登录 本地生成密钥 生成命令如下: ssh-keygen -t rsa 会生成id_rsa, id_rsa.pub两个文件 公钥拷贝到服务器 将公钥id_rsa.pub拷贝到服务器 ...

  7. Aging Cell两篇连发 | 华中科技大学王建枝团队运用蛋白质组学技术发现具有AD早期诊断价值的血小板生物标志物

    阿尔茨海默症 (Alzheimer 's disease,AD) 是一种原发性的中枢神经系统退行性疾病.AD的主要临床症状是缓慢的认知功能减退,包括记忆.逻辑推理能力和语言功能的进行性丟失,最后发展为 ...

  8. Mol Cell丨吕志民团队揭示琥珀酰化介导的肿瘤细胞氧化应激调控新机制

    蛋白质琥珀酰化修饰 (succinylation) ,作为赖氨酸酰化修饰家族的重要一员,于2011年由芝加哥大学赵英明教授团队在Nature Chemical Biology 发文被首次报道,并被评为 ...

  9. 如何高效、快速学习Flutter?如何避坑?(文末送服福利)

    稳住,今天是周末,不过我今天要上班....啊..啊... 对于 Flutter 我没有太多的发言权,不过GSY是对 Flutter 充分理解并精深掌握的前辈了,所以转一篇他对 Flutter 的一些解 ...

  10. 面试必备:Android Activity启动流程源码分析

    最近大致分析了一把 Activity 启动的流程,趁着今天精神状态好,把之前记录的写成文章. 开门见山,我们直接点进去看 Activity 的 startActivity , 最终,我们都会走到 st ...