css上怎么加悬浮窗

CSS是网页设计中非常重要的一部分，它可以美化网页，增强用户体验。而加入悬浮窗也是一种提高用户体验的方式。下面介绍如何在CSS中加入悬浮窗。

<style>
  .floating-window {
    position: fixed; // 固定定位，悬浮于屏幕上方
    bottom: 10px;   // 距离底部10像素
    right: 10px;    // 距离右侧10像素
    background-color: #ffffff;    // 背景颜色为白色
    border: 1px solid #000000;    // 边框颜色为黑色
    padding: 10px;   // 内边距为10像素
    width: 200px;    // 宽度为200像素
    height: 100px;   // 高度为100像素
    z-index: 999;    // 层级为999，使其悬浮于其他元素之上
    display: none;   // 初始状态为隐藏
  }

  .floating-window:hover {
    display: block;  // 鼠标悬停时显示
  }
</style>

<div class="floating-window">
  Content
</div>

以上代码中，我们使用CSS中的fixed属性来将悬浮窗固定在屏幕上方。使用bottom和right属性来设置距离底部和右侧的距离。我们还设置了背景颜色、边框颜色、内边距、宽度和高度等样式。最后设置层级为999，并将初始状态设为隐藏。

当鼠标悬停在该元素上时，我们使用:hover属性来触发显示。这样就可以得到一个简单的悬浮窗。