Question

我正在构建一个应用程序，在移动设备上我们有一个可以滑入并占据视口100％的面板。这是附加position:fixed属性。在面板的顶部，我有一个“返回”链接，这是一个<p>，里面有一个锚<a>Back to...</a>。

现在我想要实现的是将其粘贴到页面顶部，这样当用户向下滚动页面时，“返回”链接始终位于页面顶部。原因在于面板通常可以包含大量信息，特别是在移动设备上。我不想使用Javascript，因为我希望有一种方法可以解决这个问题。

我尝试过这个<p> position:fixed属性，但因为它包含的块位于fixed，所以它什么也没做！有没有解决这个问题的方法？有没有人以前做过类似的事情？

HTML

<div id="panelDiv">
  <p><a href="#" class="back-to-link">Back to...</a></p>
  ......
  Panel content goes here
  ......
</div>

CSS

#myDiv {

  bottom: 0;
  left: 0;
  overflow: scroll;
  padding: 0.85714em;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(-100%);
  transition: transform 350ms ease-in 0s, opacity 350ms ease-in 0s;
   z-index: 9999;
}

p {
  position:fixed;
  top:0;
}

现在，我认为正在发生的事情是因为容器已经修复，浏览器已经将容器固定在顶部，因此当我将相同的容器添加到包含元素时，它不会做任何事情。有办法解决这个问题吗？

固定位置元件内的固定位置元件

0 个答案: