看到一个好看的状态栏不知到用什么做出来的

img


这样的菜单使用什么做的，谢谢。它是悬浮在canvas上。
来源：
Excalidraw | Hand-drawn look & feel • Collaborative • Secure Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them. https://excalidraw.com/

css啊，只要把中间图标找到，很好写啊，随便写个模子给你


<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title> 页面名称 </title>
  <style type="text/css">
    .box {
      display: flex;
      box-shadow: 0 0 20px 1px lightgray;
      position: absolute;
      border-radius: 5px;
    }

    .btn {
      background-color: #E9ECEF;
      width: 50px;
      height: 50px;
      border-radius: 6px;
      margin: 4px;
      cursor: pointer;
      transition: all 0.8s;
      position: relative;
    }

    .btn:hover {
      background-color: #CED4DA;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">1</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">2</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">3</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">4</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">5</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">6</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">7</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">8</div>
    </div>
  </div>
</body>

<script>

</script>

</html>

怎么做出来 固定定位
position: fixed;
z-index: 999;