【CSS】position

CSS position

1.静态布局 static

static 是 position 属性的默认值 ,表示没有定位。使用静态定位的元素会按照元素正常的位置显示,并且不会受到 topbottomleftrightz-index 属性的影响

2.相对定位 relative

相对定位就是元素相对于自己默认的位置来进行位置上的调整

我们可以通过 topbottomleftright 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。

注意:相对定位的元素可以移动并与其他元素重叠,但会保留元素默认位置处的空间。

3.绝对定位

绝对定位就是元素相对于第一个非静态定位(static)的父级元素进行定位 ,如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。

我们同样可以使用 topbottomleftright 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。

使用绝对定位的元素会脱离原来的位置,不再占用网页上的空间。与相对定位相同,使用绝对定位的元素同样会与页面中的其它元素发声重叠,另外使用绝对定位的元素可以有外边距,并且外边距不会与其它元素的外边距发生重叠。

4.固定定位

固定定位就是将元素相对于浏览器窗口进行定位使用固定定位的元素不会因为浏览器窗口的滚动而移动,就像是固定在了页面上一样,我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。

5.粘性定位 sticky

粘性定位与前面介绍的四种定位方式不太一下,它像是相对定位和固定定位的结合体。

当滚动页面时它的效果与相对定位相同,当元素滚动到一定程度时它又会呈现出固定定位的效果。比如一些网页上的导航菜单,当页面加载完成时它在自己默认的位置,当我们向下滚动页面时它又会固定在页面的最顶端。

粘性定位可以被认为是相对定位(relative)和固定定位(fixed)的混合。元素在跨越特定阈值前为相对定位(此时设定的 top, right, bottom、left 阈值并不生效),之后为固定定位。粘性定位元素并未脱离文档流

粘性定位的元素在跨域特定阈值后,根据设定的 topbottomleftright 四个属性相对于它的最近滚动祖先和 containing block(最近块级祖先 nearest block-level ancestor)进行偏移。

需要注意的是:

  • 在设置position:sticky;时,必须再定义 top、bottom、right、left 四个属性之一,否则只会处于相对定位的状态;
  • 使用粘性定位元素的父元素不能定义overflow:hidden或者overflow:auto属性;
  • 父元素的高度不能低于粘性定位元素的高度;
  • 粘性定位的元素仅在其父元素内有效。
  • 当页面中有多个粘性定位的元素时,若它们跨过阈值后,定位在相近的位置,那么后面的粘性定位元素会叠在前面的粘性定位元素上方!

更多详细情况的分析可以参考:粘性布局

其中某些情况可以实现后面的元素将前面的元素推出视窗的效果,可以应用在一些业务场景中。

相关推荐
cs_dn_Jie1 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic35 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo3 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx