技术分享|CSS 定位布局

2019-12-06 11:53:07

CSS 定位布局 - 相对、绝对、固定 粘性四种定位

 

文档流

文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。

 

关于定位

我们可以使用cssposition属性来设置元素的定位类型,postion的设置项如下:

relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。

absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。

fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。

static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。

inherit 从父元素继承 position 属性的值。

 sticky 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative  position:fixed 定位之间切换。 

 

定位元素的偏移

定位的元素还需要用leftrighttop或者bottom来设置相对于参照元素的偏移值。

 

relative 相对定位的示例

relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。

 

absolute绝对定位示例

absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。

 

fixed固定定位

fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。

固定定位是完全不管父级元素是否设置了定位属性的,直接就与body进行定位偏移。

这种定位方式最适合用于放广告了。

 

sticky 粘性定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

 

定位元素层级 z-index

定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级。

为什么需要元素的层级呢?例如当在做一个弹框的时候,需要弹框不被其他任何元素覆盖,那么则可以设置弹框的元素的层级为最高即可。

如果,要将某个div不被覆盖,那么就可以设置层级为10(因为默认元素的层级小于10

当然,如果设置弹框不知道其他元素的层级到底多少,则可以设置999之类的最大数值即可,那样就不用被其他元素覆盖了。

 

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

 

本文由中软卓越(西安)汇集整理,转载请注明作者及出处。

如需学习java、UI设计、软件测试、Python、大数据、嵌入式、Linxu云计算,请点击咨询,加入我们让你的未来不再迷茫。

关于我们

【中软卓越】-中软国际旗下高端教育品牌,是中软国际有限公司投资的大型人才服务机构,是中软国际人才战略的核心组成部分之一,承担集团发展过程中人才储备和培养的任务;专注IT培训37年,国内高端IT培训品牌,教育部指定官方IT人才培训机构。专注java培训、UI设计培训、软件测试培训、Python培训、大数据培训、嵌入式培训、Linxu云计算培训等培训课程。217家合作院校,880家合作企业,真实项目实战,素质拓展,职业规划。零首付,100%保障就业,先就业,后付款。

最牛逼的毕业学员入职名企享受高薪就业。880家合作企业,年培育学员人数逾6000人,毕业学员就职于中软国际、百度、腾讯、阿里巴巴、IBM、华为科技、中兴通讯、软通动力等知名企业。

还有什么疑问?我们全面为你解答!为您提供一对一专人服务,请点击下方咨询

  • 卓越资讯
  • 猜你想看
  • 常见问题

    Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。[详细课程]

    软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程;软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。[详细课程]

    软件测试是在规定的条件下对程序进行操作,以发现程序错误,衡量软件质量,并对其是否能满足设计要求进行评估的过程。[详细课程]

    Python是一种面向对象的解释型计算机程序设计语言,语法简洁清晰,特色之一是强制用空白符作为语句缩进,它常被昵称为胶水语言,能够把用其他语言制作的各种模块。[详细课程]

    UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,一般是指对软件的人机交互、操作逻辑、界面美观的整体设计。[详细课程]

    大数据,又称巨量资料,指的是所涉及的数据资料量规模巨大到无法通过人脑甚至主流软件工具,在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯。[详细课程]

    云计算是一种按使用量付费的模式,这种模式提供可用的、便捷的、按需的网络访问, 进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这些资源能够被快速提供,只需投入很少的管理工作,或与服务供应商进行很少的交互。[详细课程]

    西安市长安北路8号高速大厦三楼

    电话:029-61876930

河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三