css如何实现顶部搜索框不滑动

CSS中有一个属性叫做position，可以用来设定元素的定位方式。

其中，有一个值是fixed，它表示这个元素的位置固定不变，不会随着页面的滚动而滑动。在实现顶部搜索框不滑动的时候，我们就可以使用fixed来定位搜索框。

.search-Box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #f5f5f5;
  z-index: 9999;
}

在上面的代码中，我们定义了一个类名叫作search-Box的元素，通过position:fixed来将其固定在页面顶部。由于搜索框是在顶部，所以使用top:0来设定它的上边距为0。同理，使用left:0和right:0，可以将搜索框的左右两侧与页面的左右两侧对齐。为了让搜索框可以看起来更美观，我们还可以设置其高度为50px，并为其添加一个背景色。

最后，由于搜索框被固定在页面顶部，可能会被其他元素遮挡，因此我们还需要给搜索框添加z-index属性来保证其在所有元素之上。

综上所述，通过CSS的position属性，可以很方便地实现顶部搜索框不滑动的效果。只需要将其定位到页面的顶部，并且不随着页面滚动而滑动即可。