Menu
I am trying to insert a div into any part of the body and make its position: absolute relative to the whole document and not a parent element which has a position: relative.
343
Absolute In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
The default value of position property is static . So the class . absolute has no parent that is relatively positioned. Therefore it stays relative to the viewport and appears all the time even when you scroll.
In a nutshell … position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.
You're looking for position: fixed.
From MDN:
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page.
Notice it doesn't work when...
(...) one of its ancestors has a
transform,perspective, orfilterproperty set to something other thannone.
63
You will have to place the div outside of the position:relative element and into body.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
