browser not understanding css correctly
hey folks can anyone help me in debugging this weird CSS issue in the attached image as you can see I have applied.
but the button is not fixing on correct position I don't if this issue with CSS or my browser not parsing the CSS correctly can anyone help me in fixing this issue.
22 Replies
which button are you moving? The "add a new task" one? If so, the "sort by" element probably has a position of relative or something like that
here is the link to sandbox
https://codesandbox.io/p/github/AdityaKirad/Instant-Tasks-Zustand/main
how can position relative on another element can interfere with position fixed on other element
@Bardacoon you there
Yeah
I managed to make it work but I don't know why it didn't work
try to remove the backrop filter from the header
Stack Overflow
Why does applying a CSS-Filter on the parent break the child positi...
So I have this title-screen "animation" that has the title centered on a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working
yeah it worked for me also I wonder why backdrop-filter is breaking fixed position
I read Mdn and it says position fixed is relative to the containing block, which is usually the body, but when you add the filter, you create a new containing block
I also just a medium post talking about this so is there any workaround for this
Just remove the backdrop-filter
It's not like it's doing something rn
@Bardacoon thank you so much
you pinged me?
nope
you realize I can see deleted messages, right?
and that it pulls people into threads when you ping them?
maybe I don't remember if i pinged if i pinged you then it was by mistake
sorry for that
no worries
by the way do you know workaround for the above problem
no
ok
Why dont you just remove the backdrop filter? Also if you dont wanna do that you can create another button with position fixed and then you hide it on large screens
I removed that it was not very important
so it should work right?
yeah it's working
do you think it's a CSS bug or it was intentiona;
It was intentional