Html Question posted in
Some basic documentation can be found here.

Html – Sticking a button on the bottom right

Picture of app

I’m making this project for my bootcamp, I’m struggling with moving this + button to the bottom right of this container, my project has this container to "simulate" a phone screen, I have a sub-content box for it and everything, but I’m struggling on having the button on the bottom right above the footer, sticking to it, at the moment its always stuck to each "mission" I create.

.bottom-right-button {
position: absolute;
bottom: 0; /
right: 0;
}

I’ve tried this, but doing it, makes the button be on the bottom right of the actual page, not the "simulation" of the phone screen

Tags:

2

Answers


  1. 0

    Whichever div you want to align:

    position: absolute;
bottom: 0;
right: 0;

    Whichever div you will accept as a reference:

    position: relative;
    Login or Signup to reply.
  2. 0

    I’m not sure if I get the question (a little code would be nice) but you may be looking for position: fixed to position the button relative to the viewport

    * { box-sizing: border-box; }
body { margin: 0}

#app {
  width: 100vw;
  min-height: 100vh;
  font-family: sans-serif; 
}


main {
  background: whitesmoke;
  min-height: 300vh; /* force scroll to test */ 
  background: linear-gradient(transparent, slategray); 
  padding: 1rem;
}

nav {
  position: fixed;
  inset: auto 0 0;
  height: 3rem;
  background: silver;
}

button {
  position: fixed;
  bottom: 4rem; /* include nav height to place above */
  right: 1rem;
  appearance: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0;
  background: dodgerblue;
}
    <div id="app">
  <main>
    <h1>Content</h1>
    <button>+</button>
  </main>
  <nav>
    Navigation
  </nav>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search