大前端04-固定组件在屏幕位置,随着滑轮滚动——使用css样式:position
背景说明:
在遇到一些很长,很长的页面时候我们希望组件能够跟随用户操作,悬浮在固定位置,因此我们可以使用postition组件
解释:
CSS 的 position
属性用于设置元素在页面上的定位方式。它有 5 个可能的值:static
、relative
、absolute
、fixed
和 sticky
。下面分别对这些值进行介绍,并给出一些示例。
static
(默认值): 元素按照正常的文档流进行布局。这是所有元素的默认定位方式。在这种定位方式下,元素不受top
、right
、bottom
和left
属性的影响。
Copy codediv {position: static;
}
relative
: 元素相对于其正常位置进行定位。使用top
、right
、bottom
和left
属性可以调整元素相对于其原始位置的偏移。注意:相对定位元素不会脱离文档流,原位置仍然会被占用。
Copy codediv {position: relative;top: 20px;left: 50px;
}
absolute
: 元素相对于最近的非static
定位的祖先元素进行绝对定位。使用top
、right
、bottom
和left
属性可以调整元素相对于祖先元素的偏移。绝对定位的元素会脱离文档流,原位置不再占用空间。
Copy code.relative-parent {position: relative;
}.absolute-child {position: absolute;top: 10px;right: 20px;
}
fixed
: 元素相对于浏览器窗口进行固定定位,即使页面滚动,元素也始终保持在设定的位置。使用top
、right
、bottom
和left
属性可以调整元素相对于浏览器窗口的偏移。固定定位的元素会脱离文档流,原位置不再占用空间。
Copy codediv {position: fixed;top: 0;right: 0;
}
sticky
: 元素的定位在滚动页面时可以在相对和固定定位之间切换。当页面滚动到一定程度时,元素会固定在设定的位置。使用top
、right
、bottom
和left
属性可以调整元素相对于浏览器窗口的偏移。粘性定位的元素在没有固定时仍然遵循文档流。
Copy codediv {position: sticky;top: 20px;
}
以上就是 CSS position
属性的各个值的介绍和示例。希望对你有帮助。