Position fixed on top right relate to parent div - html

Question

I have an html like this:
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
With this css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: fixed;
padding-left: 20px;
width: inherit;
max-width: inherit;
flex: auto;
flex-direction: column;
display: flex;
right: 0;
}
The result is that I have a container with 3 fixed buttons but outside of it. What I need is that the buttons stays inside the container on top right. But in this way, with right: 0, it's not relate to the parent container, but it seems relates to the web page. Is there a way to fix this?
that's the codepen and as you can see the buttos are totally on the right of the page instead of the container: https://codepen.io/eryonn/pen/oNBbOwe

Answer 1

Try to use position: absolute; to position an element inside a parent with position: relative; and then position: fixed; on an element inside the absolute positioned

Answer 2

Instead of right: 0; for the element .vertical-btns use
margin-left: min(50rem, 100%);
transform: translateX(-100%);
Why margin-left: min(50rem, 100%)?
That's because your wrapper has not a fixed width, but just a max-width. So when the viewport is smaller than 50rem it becomes responsive so also the margin-left must be lower, accordingly. More information about the CSS min() function can be found on MDN
Note 1: if you're using a CSS preprocessor an error could be raised while compiling the source, probably because the preprocessor already has a min() function. If you want to use the CSS function instead change the case of the letters (e.g Min(...)) since the css function are case-insensitive
Note 2: if your browser doesn't support the min() function in this case you could use a mediaquery which will do the same thing (just a bit more verbose), e.g.
.vertical-btns { margin-left: 100% }
#media (min-width: 50rem) {
.vertical-btns { margin-left: 50rem }
}
Result

Answer 3

"position: fixed" removes the element from the normal flow of the page and positions it in relation to the viewport. You can use "position: sticky" with "top:0" which will make your element stick to the top even when scrolling. Here's the code sample.
.vertical-btns {
position: sticky;
padding-left: 20px;
width: 100%;
flex: auto;
flex-direction: column;
display: flex;
align-items:flex-end;
top:0;
height:0;
}

Answer 4

Just use position: absoulte instead of position: fixed and you can position your buttons relative to the container wherever you want ;-)
Position fixed is allways relative to viewport. Position àbsouteis allways relative to the notstatic`positioned parent element.
See example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: absolute;
top: 0;
right: 0;
padding-left: 20px;
width: inherit;
}
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
Note: Updated the code to comments.