移动按钮时下拉框不会随按钮一起移动

Question

.CategoryBlock {
  margin-top: 0.5rem;
  gap: 1rem;
  display: flex;
  overflow-x: scroll;
  scrollbar-width: thin;
}

.CategoryBlock>*:first-child {
  margin-left: auto;
}

.CategoryBlock>*:last-child {
  margin-right: auto;
}

.CategoryBlock button {
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2rem;
  border: 0;
  color: #2e652d;
  background-color: white;
  position: relative;
}

.CategoryBlock button:hover {
  color: #51b44f
}

.Categories {
  position: absolute;
  display: none;
  border: #2e652d;
  background-color: hsl(0, 0%, 95%);
  border-color: #2e652d;
  border-style: solid;
  border-width: thin;
  max-width: 10rem;
}

.DropDown a {
  display: block;
  text-decoration: none;
  color: #63815f;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.125rem;
  margin: 0rem 0.5rem 1rem 0.5rem;
}

.DropDown a:hover {
  text-decoration: underline;
}

.DropDown:hover .Categories {
  display: block;
}

<nav class="CategoryBlock">
  <div class="DropDown">
    <button>
            Articles
        </button>
    <nav class="Categories">
      <a></a>
      <a href="">Feature articles</a>
      <a href="">Opinion articles</a>
      <a href="">Informative</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
            Short stories
        </button>
    <nav class="Categories">
      <a></a>
      <a href="">Narratives</a>
      <a href="">Retellings</a>
      <a href="">Poetic</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
            Essays
        </button>
    <nav class="Categories">
      <a></a>
      <a href="">Persuassive</a>
      <a href="">Summaries</a>
      <a href="">Book reviews</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
            Debates
        </button>
  </div>
  <div class="DropDown">
    <button>
            Scientific reports
        </button>
    <nav class="Categories">
      <a></a>
      <a href="">Physics</a>
      <a href="">Chemistry</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
            Devlogs
        </button>
    <nav class="Categories">
      <a></a>
      <a href="">Physom</a>
      <a href="">Automatic Page Generator</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
            Programs
        </button>
    <nav class="Categories">
      <a></a>
      <a href="">Physom</a>
      <a href="">Automatic Page Generator</a>
      <a href="">Raytracer</a>
      <a href="">3D renderer</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
            Math
        </button>
    <nav class="Categories">
      <a></a>
      <a href="">Discrete</a>
      <a href="">Linear Algebra</a>
      <a href="">PreCalculus</a>
      <a href="">Calculus</a>
    </nav>
  </div>
</nav>

我有一个下拉框，当按钮滚动到不同的位置时，它不会随按钮移动，这是因为下拉框是绝对的，而且我不知道如何：保持绝对行为，但有点锚定它到按钮本身，而不是它自己的绝对定位，基本上我想创建一个位于按钮下方的下拉框，但也起到绝对作用并且没有边距，我尝试使类别块相对，但这只是添加了溢出- y 而不是我想要的效果。

如果有人指出我正确的方向，那将非常有帮助！

Answer 1

将

position: relative

给

.Dropdown

而不是

button

，它应该可以正常工作。

.Dropdown {
   position: relative
}