时间戳

首页 > 解决方案 > 固定位置不会在其他浏览器中保持固定

javascript - 固定位置不会在其他浏览器中保持固定

问题描述

我有这个用于退出模式的图标，当在 Chrome 上向下滚动时它保持完全固定，但我注意到它在 Firefox 和 Safari 等其他浏览器中不起作用。我还注意到该图标在右上角有点偏离，但在一瞬间它会重新定位它应该在的位置。任何想法是什么原因造成的？是因为作为模态的父级是位置固定的，你不能在固定容器内有固定位置吗？我还在学习 HTML。

.outer {
  position: fixed;
  top: 0;
  width: 70px;
  cursor: pointer;
  z-index: 3;
  right: 0;
  margin: 20px 20px 0px 0px;
}

.inner {
  width: inherit;
  text-align: center;
}


.inner::before, .inner::after {

    position: absolute;
    content: '';
    height: 1px;
    width: inherit;
    background: #FFC107;
    left: 0;
    transition: all .3s ease-in;

#animatedModal3 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow-y: auto;
  z-index: 9999;
  opacity: 1;
  animation-duration: 0.6s;
}

.inner::after {

    bottom: 50%;
    transform: rotate(-45deg);

}

.inner::before {

    top: 50%;
    transform: rotate(-45deg);

}
<div id="animatedModal3" class="bg-black">

  <div class="close-animatedModal3 py-3 bg-black">
    <div class="outer">
      <div class="inner">
        <label class="label2">Back</label>
          </div>
          </div>

          </div>
          </div>

标签： javascripthtmlcss

解决方案

您有一个未在此处关闭的括号 .inner::before, .inner::after {...

推荐阅读