I want to fix an element with fixed in the lower right of the parent element

Question

I want to fix an element with position: fixed in the lower right position for the parent element.

At present, the main site is centered on the main content that contains everything, and there are margins on the left and right.

I want to display a button that jumps to pagetop in the lower right corner of the main page, not in the left and right margins.

body {
    background-color: #000;
}

main {
    background-color: pink;
    height: 100vh;
    margin: auto;
    position: relative;
    width: 85%;
}

a {
    position: fixed;
    bottom: 0;
    right: 0;
}

<body>
    <main>
        <a href="#">↑</a>
    </main>
</body>

I found a related question and tried sticky, but this didn't respond when I set it to right: 0. Because this content is responsive, it was difficult to place it with px designation.

Can I position an element fixed relative to parent?

In absolute, when you scroll, it moves with it, but I want to always keep it fixed. — , Nov 28 '19 at 20:01
You can't have it fixed AND be located in relation to another elem3. — Paulie_D, Nov 28 '19 at 20:11
@AspiringCanadian Yes, I wanted that behavior. However, I don't want the link range to be the entire bottom of the screen.I tried rewriting with inline-block, right: 0, but right justification was canceled in these. — , Nov 28 '19 at 20:29
Depends on what effect you are after. I've suggested a solution below which might be what you need. — Paulie_D, Nov 28 '19 at 21:02

Sarvesh Mahajan · Answer 1 · 2019-11-28T20:18:42.573

1

Instead of using position: fixed, replace it with position: absolute, as it is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed, and you will be able to solve the issue (please find below sample code):

body {
    background-color: #000;
}

main {
    background-color: pink;
    height: 100vh;
    margin: auto;
    position: relative;
    width: 85%;
}

a {
    position: absolute;
    bottom: 0;
    right: 0;
}

<body>
 <main>
  <div style="position: absolute; bottom: 0; right: 0;">
   <div style="position: fixed;bottom: 3%;right: 9%;">
   <a href="#">↑</a>
   </div>
  </div>
 </main>
</body>

edited Nov 28 '19 at 20:18

answered Nov 28 '19 at 19:56

Sarvesh Mahajan

914
7
16

But it is not fixed position when scrolling? – Nov 28 '19 at 20:03
I have updated html, please take a look I think this should solve your problem or follow: https://jsfiddle.net/64eupqkz/1/ – Sarvesh Mahajan Nov 28 '19 at 20:19
Thank you for your reply. Certainly it looks as expected, but how did you calculate the bottom and right percentages? – Nov 28 '19 at 20:24

score 1 · Answer 2 · answered Nov 28 '19 at 21:31

You can used sticky position if the link is a direct child of body and stands right at the end of content

section {/* for demo , to mimic content */
  height: 150vh;
  background:lightblue;
  margin:0 3em;
}

a[href="#top"] {
  /* stick it to 1em edges at bottom right */
  position: sticky;
  float: right; /* go to the right */
  bottom: 1em;
  right: 1em;
  background:yellow;;
}

<header id=top>header</header>
<section>any height</section>
<footer>footer</footer>
<a href="#top"> to top </a>

score 0 · Answer 3 · answered Nov 28 '19 at 20:59

Since we know the width of the main div we can place the link with position fixed using a calculation of the right value.

NOTE - The link's position is not related to the main element but rather the viewport.

* {
  margin: 0;
}

body {
  background-color: #000;
}

main {
  background-color: pink;
  height: 200vh;
  margin: auto;
  position: relative;
  width: 85%;
}

a {
  position: fixed;
  bottom: 0;
  
  right: calc((100% - 85%) / 2);
  
  color: red;
  font-size: 2rem;
  text-decoration: none;
  background: white;
}

<main>
  <a href="#">↑</a>
  </main

I want to fix an element with fixed in the lower right of the parent element

3 Answers3