前端开发中学习”定位“的那些事。

众所周知，前端CSS中，盒模型、浮动、定位为必须掌握的三座大山。

今天就来聊聊定位的那些事。

定位是什么？

先来看看哪些场景用到定位，如下图所示，凡是有盒子压住另一个盒子的地方都可定位，因为用浮动做不了，如果盒子浮动，会并排但不会出现有层级的观感。所以想要有层级的观感，就得用定位。

简单来说，定位就是将盒模型中的盒子显示在我们想要的位置。

定位的语法

定位由position属性和边偏移属性组成。

position属性语法为：{position:属性值}，常用值如下：

边偏移属性语法为：{边偏移：属性值}，常用值如下：

定位模式和用法

1、静态定位static

静态定位具备标准流特性，所有元素默认静态定位，静态定位不能通过设置边偏移改变位置。

静态定位的作用：取消定位。

2、相对定位relative

相对定位在标准流中，采用相对定位的盒子仍然占用原来的位置。每次移动位置，以自己的左上角为基点移动（相对于自己移动位置）

3、绝对定位absolute

绝对定位不具备标准流特性，采用绝对定位的盒子在设置边偏移后不占位置。

绝对定位的盒子在父级没有定位时，以浏览器为准对齐；当父级有定位，依据最近的已定位的父元素进行定位。

4、固定定位fixed

固定定位不具备标准流特性，不占位置，始终以浏览器为标准显示位置，不管浏览器滚动和窗口大小，fixed显示固定。

终极用法口诀：子绝父相，或子绝父绝。

就是说，在实际开发过程中，子盒子采用绝对定位，那么父盒子必定采用相对定位或绝对定位。

如果要实现绝对定位的盒子水平或垂直居中需要采用一定的算法。因为加定位有偏移和浮动的盒子通过设置margin值实现水平居中失效。那么采用以下方法：

先设置左边偏移50%，50%表示父盒子的一半，即left：50%。

再设置自己盒子外边距为盒子宽度负的一半，即margin-left：-width/2。

定位模式转换

当盒子加fixed和absolute定位，元素转换为行内块元素。

如果盒子固定定位，当盒子内容为空时，盒子的高度会为0，为避免这种情况可设置盒子的宽高，再设置下面的盒子的margin值，可实现top通栏固定不动。如下图的首页展示固定top通栏。

层级z-index

当定位元素重叠，可通过z-index设置层叠次序。

层级z-index只针对定位的元素，标准流和浮动不具备该属性。

层级z-index的用法：z-index:2;后面没有单位。

采用相对定位比标准流高一层级，浮在上面。

盒子已经用相对定位，但是鼠标放上去还想用相对定位，就可用z-index。

取值相同时，根据书写顺序，后来居上。

默认为0，值越大层级越高。

文章标题：前端开发中学习”定位“的那些事。
文章地址：https://www.cdcxhl.com/news/104708.html

成都网站建设公司_创新互联，为您提供网站营销、网站改版、标签优化、网页设计公司、虚拟主机、搜索引擎优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联