-1

I have a layout, that looks as following:

enter image description here

I am trying to place the div circle on buttom and right as following:

$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;
        }
    }
}

But as you can see, it does not work. What am I doing wrong?

The html code is:

<div class="portfolio-container">
    <div class="show-menu-btn">
      <i class="fas fa-align-justify fa-2x" />
    </div>
  </div>
softshipper
  • 32,463
  • 51
  • 192
  • 400

1 Answers1

1

I see two issues with this, firstly, you need to be stating whether the bottom and right are using px, em, rem etc:

bottom: 10px;
right: 10px;

Secondly, you should change your position to absolute rather than sticky

Sam Willis
  • 4,001
  • 7
  • 40
  • 59
  • I think you are misunderstanding what sticky does, read the answer here: https://stackoverflow.com/questions/43707076/position-sticky-not-working-css-and-html – Sam Willis Jul 17 '18 at 08:21