[分享]css中fixed使用场景

CSS中fixed使用场景fixed属性是CSS中常用的一种布局方式，它可以让元素固定在页面的某个位置，不随页面滚动而滚动，下面我们来介绍一下它应该如何使用。固定导航栏： nav{ :fixed; /...

CSS中fixed使用场景

fixed属性是CSS中常用的一种布局方式，它可以让元素固定在页面的某个位置，不随页面滚动而滚动，下面我们来介绍一下它应该如何使用。

固定导航栏：
nav{
  position:fixed;   //固定定位
  top:0;   //顶部定位
  left:0;    //左侧定位
  width:100%;   // 与屏幕宽度一致
} 

上述代码可以实现一个固定在页面顶部的导航栏，无论用户向下滚动页面，导航栏都会始终保持在页面最顶部，方便用户随时进行页面导航。

悬浮广告框：
.ad-box{
  position:fixed;   //固定定位
  bottom:0;    //底部定位
  right:0;    //右侧定位
  width:300px;   //宽度为300px
  height:200px;   //高度200px
} 

上述代码可以实现一个悬浮在页面底部的广告框，无论用户向上滚动页面，广告框都会始终保持在页面最底部，这种方式可以提高广告投放的效率。

总之，fixed属性可以实现很多有趣的页面效果，但也要根据实际业务需求，合理地运用它，让页面看起来更加美观、高效。