Menu
I am facing a bit of a 'div hell'. This is the html snippet:
<div id="xyz" class="sensoricon moveable type1 node-2-sensor-1 string1" style="position: absolute; top: 241.467px; left: 236.417px; opacity: 1;">
<img src="/content/images/shared/sensors/bla.png" alt="">
</div>
I understand that:
position: absolute;
should prevent the div from scrolling, but it still does (although only a little bit at the beginning). Can anyone see anything generally wrong?
573
Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
You can use the min() function for conditional rendering like this. If 50vh would put the element off-screen, then 100vh - 100px will result in a smaller value. We can therefore use min() to put the element at the bottom if it would be off-screen.
IF you were to use all absolute div tags you could easily have your tags overlap and hide each other when the data within them changed. Secondly, many good sites allow for the information to wrap depending on the screen resolution and browser size that a user uses to access the web page.
What you want to do is:
position: fixed;
Because position: absolute; sets position relative to parent coordinates and when the document is scrolled, absolute position is STILL relative to parent's and parents (through whatever count of levels) is relative to whole document position.
On the other hand position: fixed sets position relative to window's and not document's. That way your element stays in the same place when scrolled.
66
Like i said in my comment:
You should use position: fixed.
It is similar to absolute, but it don't scroll with the whole site, it is "fixed" on the given position.
27
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
