为什么上下左右不能相应地工作？

Question

我有一个布局，如下所示：

我正在尝试将div圆放置在buttom的正下方，如下所示：

$menu-btn: 65px;

.portfolio-container {
    width: 100%;
    height: 100%;

    .show-menu-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: $menu-btn;
        width: $menu-btn;
        border-radius: 50%;
        background-color: #24344b;
        position: sticky;
        bottom: 10;
        right: 10;

        .fa-align-justify {
            color: white;
        }
    }
}

但是如您所见，它不起作用。我究竟做错了什么？

html代码为：

<div class="portfolio-container">
    <div class="show-menu-btn">
      <i class="fas fa-align-justify fa-2x" />
    </div>
  </div>

Answer 1

我看到了两个问题，首先，您需要说明bottom和right是否正在使用px, em, rem等：

bottom: 10px;
right: 10px;

第二，您应该将位置更改为absolute，而不是sticky