固定到浏览器可以固定动态面板在浏览器中的位置保持不变,仅在浏览器中有效,可以设置水平固定方向、垂直固定方向、始终保持顶层。
有两个地方可以设置,一是鼠标右键,另一个是右侧样式设置面板
固定到浏览器窗口
勾选之后,开启固定设置,默认水平方向左侧、垂直方向顶部、始终保持顶层
水平固定
- 会在水平方向上固定元件的位置,无论浏览器宽度如何变化,元件的水平位置不会改变
- 选择居中时,可以设置距离中部位置的间距,也就是相对于水平居中位置的位移
- 选择右侧时,可以设置距离右边的边距
- 有三个选项:左侧、居中、右侧
垂直固定
- 会在垂直方向上固定元件的位置,无论浏览器高度如何变化,元件的垂直位置不会改变
- 选择中部时,可以设置距离中部位置的间距,也就是相对于垂直居中位置的位移
- 选择底部时,可以设置距离底部的边距
- 有三个选项:顶部、中部、底部
始终保持顶层
勾选之后元件会始终在最顶层显示,相当于一直置顶的功能
常用场景
固定到浏览器功能,具有非常多的使用场景,也是在网站设计中随处可见的常用功能,下面就举几个实际使用的例子
顶部导航栏