position属性(使用 position 属性进行页面布局排版)
1. 了解 position 属性
Position 属性可以设置 HTML 元素的定位方式，常见的值有 static、relative、absolute、fixed 和 sticky。其中，static 是默认值，即元素在文档流中的默认布局方式。
2. 相对定位（relative）
相对定位的元素可以通过 top、bottom、left、right 属性相对于其正常位置进行移动。相对定位不会改变文档流，所以其他元素的位置不会收到影响。要注意的是，当使用相对定位时，元素的 z-index 属性值被设定为 auto，即未指定。
3. 绝对定位（absolute）
绝对定位的元素从文档流中完全脱离，因此不会影响其他元素的布局。绝对定位的元素位置由 top、bottom、left、right 等属性进行设置。元素的位置会相对于父级元素的位置，如果没有父级元素，则相对于 body 元素的位置。元素在设置了绝对定位后，z-index 属性的值默认为 auto，如果需要改变元素堆叠顺序，可以通过 z-index 属性进行设定。
4. 固定定位（fixed）
固定定位的元素与绝对定位类似，都从文档流中脱离，并且相对于浏览器视口进行定位。因此，当页面滚动时，固定定位的元素也会跟随滚动而移动，但他不会受到滚动的影响而改变位置。固定定位的元素在设定 z-index 值时，会被始终放置在文档的最上面。
5. 粘性定位（sticky）
粘性定位是相对于其包含块定位的，包含块是指距离它最近的具有滚动框的祖先元素，元素的位置在遇到指定的偏移值前是相对定位，之后是固定定位。因此粘性定位可以看成是相对定位和固定定位的组合，具有特定的粘性效果。粘性定位在 CSS3 规范中被定义，目前部分浏览器尚未支持。
6. 使用 position 属性实现页面布局排版
在实际的网页制作中，position 属性常常被用来实现复杂的页面布局排版，如实现较为精细的定位布局、实现固定导航菜单等。同时，position 属性还常常与 z-index 属性联合使用，来实现元素的遮盖和堆叠。但是，滥用 position 属性会造成页面代码冗长不便维护，所以合理运用 position 属性是关键。
本文链接：http://xingzuo.aitcweb.com/9350670.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
相关推荐
-
2013款迈锐宝(2013款迈锐宝 – 知识集锦)
1. 迈锐宝的外观设计 2013款迈锐宝采用了通用全球车型平台，车身线条流畅，硬朗有力。雪佛兰将其设计作为“双肾”式前进气格栅，鹰眼型大灯，与运动型车侧线相搭配的车头设计。 2. 迈锐宝的动力系统 2013款迈锐宝提供2.4L/2.0T/2.0T劲界三款发动机。其中，2.4L迈锐宝最大功率达到141KW，最大扭矩为235N·m，匹配6速手自一体变速器（双离合…
-
超声波清洗机原理(超声波清洗机是如何工作的？)
了解超声波清洗机的原理 超声波清洗机的清洗原理是通过发生器产生高频电能, 然后转换成高频机械振动，再通过超声波换能器将其转换成物理振动，将清洗液体中的气泡形成的大量小气泡产生瞬时高压和温度，从而产生冲刷力和撞击力，达到清洗的效果。 超声波清洗机的工作过程 超声波清洗机的工作过程分成四个步骤：液体分子较为稀疏的自由运动阶段、 液体中气泡形成阶段、 气泡不断生长…
-
西铁城条码打印机(西铁城条码打印机的优缺点)
1. 引言 随着现代科技的不断发展，越来越多的企业开始使用条码打印机来提高工作效率。而在众多品牌中，西铁城条码打印机因其高品质的印刷效果和稳定的性能而备受青睐。但是，每款产品都有其优缺点，那么西铁城条码打印机有哪些优缺点呢？ 2. 优点 西铁城条码打印机的其中一个优点是印刷效果高品质。它采用的热转印技术可以使得文字和图案的印刷非常清晰，不会出现虚线或者模糊的…
-
hastaluego(离别篇：hastaluego)
第一次的别离 记得第一次要离开家的时候，我妈妈站在门口，眼泪汪汪地看着我。我虽然知道她是因为舍不得我才难过的，但还是有些生气她这样让我难受。后来我走出了门，回头看了她一眼，然后大步走去。我甚至都不敢回头看她，担心自己难以控制自己的情绪。 成年后的告别 长大后，和朋友相处的时间似乎变得更加珍贵了。不知怎么地，朋友突然告诉我她要去另一个城市发展了。听到这个消息，…
-
daemontool(使用Daemontools更好地管理系统服务)
什么是Daemontools Daemontools是一个Unix-like*作系统的工具，用于管理系统服务。它可以保证系统服务的稳定性，避免服务意外挂掉而影响系统的稳定运行。虽然它在Linux中已经被systemd代替，仍有一些老系统仍在使用Daemontools。 安装Daemontools 在Debian/Ubuntu系统中，使用下面的命令来安装Dae…
-
东风小康面包车(探究东风小康货车的优势与不足)
1. 东风小康面包车概述 东风小康是*汽车品牌之一，拥有着比较广泛的生产线和销售网络。其主要的商品为面包车，其中包括载货车、旅行车、房车和冰淇淋车等各种车型。其中，面包车是其中最受欢迎的一种类型，其以方便、实用和经济的特点在市场上居于领先地位。 2. 东风小康面包车的优势 首先，东风小康面包车的性价比非常高，特别是对于一部分中小型企业和个体经营者而言，其价格…
-
江西传媒职业学院(江西传媒职业学院：让你学有所用，用有所学)
一、学院概述 江西传媒职业学院是江西省教育厅直属、*涉外职业教育与*教育示范学院，是一所面向国内外招生的全日制本专科高等院校。学院坐落在南昌市青山湖区莲塘街道七里岗，占地面积800亩，建筑面积50余万平方米，是目前湖南乃至全国规模最大、设施最为完备的职业教育基地之一。 二、优质设施 学院拥有一支由享有*特殊津贴专家、掌握最新教育动态的海内外名师、行业领袖、大…
-
心理年龄测试题(测一测：你的心理年龄是否与实际年龄相符？)
1. 什么是心理年龄？ 所谓心理年龄，指的是一个人在心理层面上的成熟度。心理年龄并非固定不变的，它可以受到环境和生活经验等多种因素的影响而产生变化。心理年龄与人的实际年龄不一定相同，有时一个年轻人可以表现出很高的心理年龄，相反，一个年长者也可能表现出很低的心理年龄。 2. 为什么要测定心理年龄？ 测定心理年龄有多种用途，比如评估一个人的心理状态、确定一个人的…
-
网游之重生最强(网游重生：掀起最强者归来的热潮)
1.梦想再现：重回游戏世界 很多玩家在网游中盼望着能够再次回到游戏的世界中，那个属于他们的梦想世界。重生型网游模拟现实，让玩家可以再次登陆自己最喜欢的游戏，扮演自己的角色，体验那些曾经的辉煌战斗。重生不仅让游戏本身的体验更加*真，也让玩家能够更好地感受到游戏世界的意义。 2.超越自我：从零开始的征程 在重生型网游中，玩家可以选择不一样的角色或者角色属性，通过…
-
初中化学教学计划(初中化学教学计划的设计与实施)
1.引言 化学是一门重要的自然科学，其不仅有助于我们更好地理解自然界的现象，还有助于我们解决现实问题。因此有必要加强对初中化学教学的重视，合理设计教学计划，以提高学生成长能力。 2.教学目标的设计 教学目标是教学过程中不可忽略的重要部分。应根据学生的认知特点、实际需要以及学科发展的状况制定。初中化学教学目标主要分为知识、技能、过程和情感四个方面。知识方面注重…
