CODEWITHSUNDEEP
htmlcss
Itay Tur
Itay Tur

Reputation: 1689

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

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.

Upvotes: 2

Views: 1576

Answers (2)

ZecKa
ZecKa

Reputation: 2934

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>

Upvotes: 2

Timothy Alexis Vass
Timothy Alexis Vass

Reputation: 2705

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>

Upvotes: 0

Related Questions