我的代码如下所示：

<div class="container">
      <button class="leftbutton"> // these buttons control horizontal scrolling
      <ul class="scrollbar">
      <button class="rightbutton">
    </div>

我的造型是这样的：

.scrollbar{
  list-style: none;
  margin: 0;
  display: grid;
  grid-auto-columns: max-content;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 0;
}

.container{
  position: relative;
}

.leftButton {
  position: absolute;
  top: 0;
  left: 0;
}

.rightButton {
  position: absolute;
  top: 0;
  right: 0;
}

问题是滚动条的内容覆盖了左侧按钮。你知道怎么解决这个问题吗？谢谢