CSS - Safari - fixed positioned element is not relative to it's relative container

Question

I'm trying to place fixed element and keep it relative to its container, not the port view.

I made it in chrome.

On Safari however, the fixed element is placed at the bottom of the page, disregarding its parent position and place. For some reason it gets the right place when clicking the container.

I tried to add translate property to the fixed element, it didn't help.

I tried to create the fixed behaviour with absolute position instead of fix, but couldn't make it to work. It moved with the scroll.

Container CSS

.Container { display: flex; flex-direction: column; position: relative; }

Fixed Element CSS

.Fixed { font-weight: 300 !important; width: fit-content; font-size: 14px !important; position: fixed; background: value(CalendarBackground); bottom: 0; left: 3px; width: 100%; padding-left: 32px; border-radius: 3px; height: 68px; }

EDIT 1 - React Component JSX (HTML TO BE)

 <div className={classes.ExpandedEvent}> // CONTAINER <div className={classes.Container}> <div className={classes.TimeContainer}> <Text className={classes.Time}>{time}</Text> {recurrenceJsx} </div> {locationJsx} {summaryJsx} {attachmentsJsx} </div> // FIXED <TextButton onClick={_onCopyClick} className={classes.Fixed}>{t('Google_Calendar_Copy')}</TextButton> </div>

EDIT 2 - LIVE EXAMPLE

https://itaytur.github.io/wix-calendar/?path=/story/calendar--desktop-agenda

I deployed the component so it could be seen live. not all the css was loaded sorry in advance, but for reproduce the bug it works.

click the first event from the top, called: CLICK TO SEE FIXED 'COPY TO CALENDAR' BTN IN THE POPUP BOTTOM - NOT SHOWING ON SAFARI.

in chrome the copy button is shown and sticks to the bottom of the popup even when scrolling, in safari it doesn't shown at all.

You should really take time to create a working code snippets, without JSX markup to demonstrate your issue. — ZecKa
– ZecKa, Commented Jan 25, 2021 at 11:30

ZecKa · Accepted Answer · 2021-01-25 11:21:12Z

Because fixed item doesn't care about relative container

You can use absolute position inside a fixed element

But there is already a lot of post about it: Juste take a look here:

You can also take a look to sticky property: https://www.w3schools.com/howto/howto_css_sticky_element.asp

.wrapper{ width: 100%; padding: 40px; background: yellow; } .relative-item{ width: 200px; height:100vh; background: green; } .fixed-item-wrap{ position: fixed; width: 200px; height:100vh; } .fixed-item{ background: red; color: white; position: absolute; top: 20px; }

<div class="wrapper"> <div class="relative-item"> <div class="fixed-item-wrap"> <div class="fixed-item"> I'm fixed but relative ! </div> </div> </div> </div>

still doesn't work on safari for me. again, current situation works on chrome
the sticky is shown, but if the container is really big and scrollable, the text is at the bottom. so the user need to scroll to the bottom to see it.
You definitely need to create a code snippet to show us your problem, because I don't understand what you're trying to do. I'm sorry...

Timothy Alexis Vass · Accepted Answer · 2021-01-25 11:10:02Z

Here's an example of what I think it is that you're trying to achieve.

If you want the child position to be relative to it's initial position, you should set it's position as relative.

.Container { background: red; padding: 50px; } .Relative { background: white; font-weight: 300 !important; font-size: 14px !important; position: relative; bottom: 20px; border: 1px solid black; left: 55px; padding-left: 32px; border-radius: 3px; height: 68px; }

<div class="Container"> <div class="Relative"> My position is relative to my initial position </div> </div>

hey, this is not good for this case. i need the child to be fixed, so when i scroll the parent it will stick to its place

Collectives™ on Stack Overflow

CSS - Safari - fixed positioned element is not relative to it's relative container

2 Answers 2

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Linked

Related