I am trying to make a floating button that will stay in place and will not move while scrolling. Using position fixed worked for a very simple test webpage but It's not working on my website where some web export auto generated javascript for scale to fit and resize present. Those code should not mess things up. Is there any other way to fix the button where I want and will not move while scrolling. Please if anyone knows about this help ...
CSS
#scroll-top-button
{
position: fixed; /* Need a different solution without fixed position */
top: 240px;
right: 100px;
width: 210px;
height: 210px;
border-radius: 50%;
border: 8px rgba(171,229,99,0.45) solid;
z-index: 999;
}
#Web_1920__1 {
position: absolute;
width: 3554px;
height: 2216px;
border: 0px grey solid;
background-color: rgba(255,255,255,1);
overflow: visible;
visibility: hidden;
--web-view-name: Web 1920 – 1;
--web-view-id: Web_1920__1;
--web-scale-to-fit: true;
--web-scale-to-fit-type: width;
--web-scale-on-resize: true;
--web-center-horizontally: true;
--web-enable-deep-linking: true;
}
HTML
<body> /* simple structure */ <div id="scroll-top-button"></div> <div id="Web_1920__1"></div> </body>
Is it possible to achieve this in a different approach ...?
try position: fixed !important;