细谈position属性:static、fixed、relative与absolute
更新时间:2019-07-24 09:21:38
学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料、整理写下这篇随笔。
首先,我们要清楚一个概念:文档流。
简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右来布局。
而脱离文档流,就是说,将元素从普通的布局排版中拿走。其他盒子在定位的时候,无视这个元素的存在而进行定位。
现在,谈谈position属性的这些值都有怎样的特性。
一、position:static
CSS定位中的默认值。当元素不设定任何position属性时,默认用static进行定位。不定义position属性时,各对象都在原来的位置上保留。
上图忽略 top, bottom, left, right 或者 z-index 声明。
二、positon:fixed
我们在刷微博、刷学者网、看QQ空间的时候,可以发现,导航栏一直浮于顶部,任凭滚动条的移动。
我们再打开浏览器的审查元素,可以看到:
三、position:relative
relative和absolute一直是困扰初学者的两个定位属性。
顾名思义,relative,相对,相对定位;absolute,绝对,绝对定位。
w3C文档中对relative的解释是:生成相对定位的元素,相对于其正常位置进行定位。也即元素的“相对”是相对元素原来按照正常流的位置。
现在我们给Hellodiv这个元素设置为left:20px;则元素从相对于正常位置向右偏移2px:
当然,在实际的开发过程中,我们往往会碰到更精确的定位需求。我们要和父节点、要和兄弟节点协作完成。那么要注意:
1.top与bottom同时存在的时候。只有top发挥作用,如top=20同时设置bottom=20;bottom是无效的,我们会看到浏览器中,bottom被忽略(中间的删除线)。
2.left与right同时存在的时候,只发挥了left的作用。
3.如果对中间的对象设置left:20px,则对象的原来的位置保留,而后面的对象则按照原来文档流保持不变。
四、position:absolute
absolute绝对定位与文档流无关,因此不占空间,因为其相对定位被看做普通定位模型的一部分,因此后面的普通流就将它忽视。
那么,绝对元素又如何绝对呢?
W3C文档中这样描述:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。也即被定位为absolute的元素,其位置是相对于父节点而言的。
假设父元素包含子元素,则子元素的left属性表示左边框到父元素左边框的像素(当然这个父元素应当是最近的且已经定位的父元素)。
如果没有已定位的父元素,OK,元素默认以浏览器窗口为父元素,其中top是距离浏览器窗口顶部的距离,left是距离左侧的距离。
最后,值得注意的是,虽然position:absolute定位使对象脱离文件流,当我们在一件F12的时候仍然可以看到脱离文档流的元素存在于dom树中。
参考:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.htm
http://www.w3school.com.cn/cssref/pr_class_position.asp
细谈position属性:static、fixed、relative与absolute相关推荐
- CSS中position属性(abusolute | relative | static | fixed)区别
关于css3中position属性的定义: 转载于:https://www.cnblogs.com/tangjiao/p/9025934.html
- 浅谈position属性
position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. position:static static定位是HTML元素的默认值,即没有 ...
- position的值, relative和absolute分别是相对于谁进行定位,你真的知道吗?
常见的position定位方式如下: static 默认值.元素出现在正常的普通流中 relative 生成相对定位的元素,相对于其在普通流中的位置进行偏移. fixed (老IE不支持)生成绝对定位 ...
- 【拼爹坑爹不比爹】深入理解css中position属性及z-index属性
总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.) 2,单一父元素不设值,子z-index才奏效:&q ...
- CSS3理解position属性
一般情况下,页面是由页面流构成的.页面元素在页面流中的位置是由该元素在HTML文档中的位置决定的.块级元素从上向下排列(每个块级元素单独成行),而内联元素将从左向右排列,元素在页面中的位置随着外层容器 ...
- CSS中position属性值有哪些?
CSS中position属性值有哪些? 1.position:relative;相对定位 1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性) 2> 不会使元素脱离文档流( ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative ...
- position属性的absolute和relative的理解
概述: 每个定位的意义:相对定位是"相对于"元素在文档流中初始位置的,而绝对定位是"相对于"最近的已经定位的祖先元素. 主要: (其实对于定位的理解,主要问题是 ...
最新文章
- 固定资产制作修理费应如何入账
- 4kyu Path Finder #2: shortest path
- java list应用_java中list集合的应用
- 十三不香了?不止去掉刘海,iPhone14或改用QLC闪存:最高2TB容量
- 机器人教室外墙_智慧教室之机器人创客教室建设方案
- 系统、驱动相关软件下载
- ssdp协议 upnp_【零知ESP8266】教程:SSDP简单服务发现协议示例
- 关键路径例题图表_计算题专题:关键路径法(CPM)
- TeamViewer:一路前行,用技术实现领域更新
- 链表中为何使用二级指针
- python360安全浏览器_使用python3.7 的pycharm selenium自动化测试中启动360浏览器、360极速浏览器的方法...
- 对啊英语音标---二、ghywr这些辅音怎么发音
- android8 小米5s,终于来了!小米5s、小米5s Plus将提前升级Android 8.0!
- 图像检索--Deep Supervised Hashing for Fast Image Retrieval
- springboot大学生就业管理系统毕业设计源码290915
- 数据结构-选择排序(Python)
- 客快物流大数据项目(九十二):ClickHouse的MergeTree系列引擎介绍和MergeTree深入了解
- 毫米波雷达攻“芯”为上,行业巨头挑战传统供应链合作模式
- TrafficMonitor——简洁实用的网速/cpu/内存监控器
- 好玩的SWF格式小动画怎么在线转换成MP4格式
热门文章
- Android 8.1自定义开机向导
- 老人抢钱为进监狱!,不愁吃喝
- linux内核 work stuct,Linux 内核的WorkQueues API做了修改
- 【博学谷学习记录】超强总结,用心分享|软件测试第六阶段性能测试day06
- 理知道:一款图书馆图书查询安卓应用
- FLUKE DSX-5000 CH线缆测试仪怎么升级到新国标
- 微信小程序formid存在时效性
- android 炫酷图片浏览,Glide实现WebView离线图片的酷炫展示效果
- IDEA中字体大小无法更改解决办法
- Windows学习总结(24)—— 升级到 Windows 11 版本的九个理由