不悬停 CSS

CSS（Cascading Style Sheets） 是用于样式定义的一种语言。通过 CSS，程序员可以控制 HTML 文档中的排版、颜色、字体、背景等方面的样式。 CSS是Web前端开发中不可忽略的重要技术之一，能够让网站的样式和内容更加美观易读。

在 CSS 中，可以使用 position 属性来控制元素的位置。默认情况下，元素遵循文档流的规则，不开启定位。但是，当开启定位后，元素的位置就会脱离文档流，可以通过 top、right、bottom、left 属性调整元素相对于父元素位置的偏移量。

有时，我们需要让元素在页面中悬浮，比如导航菜单、回到顶部按钮等。可以使用 CSS 的 position 属性和 z-index 属性来实现。

不悬停

CSS 中的 position 属性有四个值可选：static、relative、absolute、fixed。其中，static 为默认值，元素遵循文档流的规则，不开启定位。

如果元素需要定位，可以将 position 设置为 relative、absolute 或 fixed。

• relative：相对定位，元素在文档流中仍保留位置，可以通过 top、right、bottom、left 属性调整位置。

• absolute：绝对定位，元素不再占据文档流中的位置，相对于最近的已定位祖先元素定位，如果祖先元素没有已定位，则相对于 body 元素定位。

• fixed：固定定位，元素不再占据文档流中的位置，相对于浏览器窗口定位。

代码示例

实现导航菜单在页面中悬浮不悬停的效果：

.navbar {
  position: fixed; /* 开启固定定位 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

上述代码中，.navbar 为导航菜单的样式类，通过将其 position 设置为 fixed，使其脱离文档流并固定在页面顶部，通过设置 top、left、right 控制其位置，通过 z-index 控制其层级关系，避免遮挡其他元素。

总结

通过 CSS 中的 position 属性和 z-index 属性，可以实现元素在页面中悬浮不悬停的效果，使页面更加美观易读。在实现该效果时，需要注意控制元素的位置和层级关系，避免与其他元素发生冲突。