position的属性有哪些,区别是什么
position有以下属性值:
属性值 | 概述 |
---|---|
absolute | 生成绝对定位的元素,相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。 |
relative | 生成相对定位的元素,相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定。 |
fixed | 生成绝对定位的元素,指定元素相对于屏幕视⼝(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变,⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。 |
static | 默认值,没有定位,元素出现在正常的文档流中,会忽略 top, bottom, left, right 或者 z-index 声明,块级元素从上往下纵向排布,⾏级元素从左向右排列。 |
inherit | 规定从父元素继承position属性的值 |
对 sticky 定位的理解
sticky
英文字面意思是粘贴,所以可以把它称之为粘性定位。语法:position: sticky
; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative
与 position:fixed
定位之间切换。它的行为就像 position:relative;
而当页面滚动超出目标区域时,它的表现就像 position:fixed;
它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom, left
之一,换言之,指定 top, right, bottom, left
四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
文档更新时间: 2023-01-05 17:21 作者:孙老师