【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属性;
  • 父元素的高度不能低于粘性定位元素的高度;
  • 粘性定位的元素仅在其父元素内有效。
  • 当页面中有多个粘性定位的元素时,若它们跨过阈值后,定位在相近的位置,那么后面的粘性定位元素会叠在前面的粘性定位元素上方!

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

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

相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐7 小时前
前端图像处理(一)
前端