固定位置元素与其相对容器不相关

Question

我试图放置固定元素，并保持它相对于它的容器，而不是港口视图。

我用铬做的。

然而，在Safari上，固定元素放置在页面底部，而不考虑其父元素的位置和位置。由于某些原因，当单击容器时，它得到了正确的位置。

我试图将translate属性添加到固定元素中，但没有帮助。

我试着用绝对的位置而不是固定的位置来创造固定的行为，但没能成功。它和卷轴一起移动。

容器CSS

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

固定元素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;
}

编辑1-反应组件JSX (HTML )

 <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>

编辑2-活示例

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

我部署了这个组件，这样就可以实时看到它。并不是所有的css都是预先加载的，但是为了复制bug，它可以工作。

单击顶部的第一个事件，名为:单击以查看弹出底部的固定“复制到日历”BTN --没有显示在SAFARI上。

在铬显示复制按钮，并坚持在弹出底部，即使是滚动，在safari，它根本没有显示。

Answer 1

因为固定项目不关心相对容器

可以在固定元素中使用absolute位置

但是已经有很多关于这件事的帖子了:看看这里：

• 固定位置，但相对于集装箱
• 我能定位一个相对于父元素的元素吗？

您还可以查看粘稠属性：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>

​

Answer 2

下面是一个我认为你正在努力实现的目标的例子。

如果您希望子位置相对于它的初始位置，您应该将它的位置设置为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>

​