CSS属性固定页面头部（导航栏）

html-css010

CSS属性固定页面头部（导航栏）,第1张

其实用postion: fixed并不是很方便，用position: sticky会更容易达到我们的目的。

只需要给头部设置：

即可。

将position设置为sticky，那么头部组件还会占有着上方空间，所以下面的body中的组件可以不用设置预留top。如果是用的fixed属性，那么body下面的组件也要算出导航栏的长度，再设置top属性，这样一来就麻烦了很多

可以用position:absolute来固定，这个是绝对定位，和fixed相差无几，不过这个有父元素限制，就是默认样式不会超出父元素的范围，当然可以通过margin top left bottom right等来进行位置定位

如：

<div>返回顶部</div>

CSS：

div{position:absoluteright:10pxtop:40% width:100pxheight:20px}

第二种：

div{position:fixedright:10pxtop:40% width:100pxheight:20px}