当父 div 的水平滚动可见时，如何在顶部父 div 上显示子 div答案

【问题标题】：How to show a child div on top parent div when the parent div's horizontal scroll is visible当父 div 的水平滚动可见时，如何在顶部父 div 上显示子 div
【发布时间】：2018-08-06 07:11:09
【问题描述】：

我试图在父 div 当父 div 的水平滚动可见时显示一个 100% 高度的子 div。虽然最初，它看起来很简单，但一直在努力解决。

这是标记https://codepen.io/ambarbs/pen/OwwojV

.parent {
  background: grey;
  height: 100px;
  width: 200px;
  overflow-x: auto;
  overflow-y: hidden;
  color: white;
  /*   z-index: 0; */
}

.child {
  width: 400px;
}

.menu {
  height: 300px;
  background: orange;
  z-index: 500;
}

<div class='parent'>
  <div class='child'>
    I want to show the orange .menu DIV on top of this DIV.
    Is it possible when the horizontal scroll is visible?
  </div>
  <div class='menu'></div>
</div>

更新： menu 实际上是一个上下文菜单，并且应该总是显示在滚动条的顶部。

【问题讨论】：

你能更详细地解释你的问题吗？ on-top 部分有点混乱。有时，当单词稀缺时，一张图可以帮助理解。

标签： html css overflow

【解决方案1】：

使用 CSS 你可以这样做：

将.parent 设置为position: relative;
将.child 设置为position: absolute;
将.menu 设置为position: sticky; left: 0;

.parent {
  position: relative;
  height: 100px;
  width: 200px;
  overflow-x: auto;
  overflow-y: hidden;
}

.child {
  position: absolute;
  width: 400px;
}

.menu {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: inherit;
  height: inherit;
  background: rgb(255, 120, 0, 0.8);
}

<div class='parent'>
  <div class='child'>
    I want to show the orange .menu DIV on top of this DIV.
    Is it possible when the horizontal scroll is visible?
  </div>
  <div class='menu'>MENU</div>
</div>

注意Position Sticky是not supported by any IE浏览器（当然）

IE 9、10、11 的解决方案

一点 JS 可以帮助您处理旧浏览器。
基本上，在滚动时它使用translateX 设置.menu 位置：

const transX = (ev, el) => {
  ev.target.querySelector(el).style.transform = `translateX(${ev.target.scrollLeft}px)`;
};

document.querySelector(".parent").addEventListener("scroll", ev => transX(ev, ".menu"));

.parent {
  position: relative;
  height: 100px;
  width: 200px;
  overflow-x: auto;
  overflow-y: hidden;
}

.child {
  position: absolute;
  width: 400px;
}

.menu {
  position: relative; /* Set to "sticky" and remove JS if you don't care about IE */
  left: 0;
  width: inherit;
  height: inherit;
  background: rgb(255, 120, 0, 0.8);
}

<div class='parent'>
  <div class='child'>
    I want to show the orange .menu DIV on top of this DIV.
    Is it possible when the horizontal scroll is visible?
  </div>
  <div class='menu'>MENU</div>
</div>

【讨论】：

嗨@Roko，感谢您的解决方案。菜单高度可以大于父 div 的高度。在这种情况下，它应该位于滚动条的顶部。我添加了更多信息。 menu 实际上是一个上下文菜单，并且应该始终显示在滚动条的顶部。
@ambar 您不能将元素拉出溢出。而是将您的上下文菜单放在.parent 之外，位置固定（最初隐藏）。在.parent 上单击获取pageX, pageY 坐标，减去offsetParent().left 和.top 位置。

【解决方案2】：

Solution

将所需子项的位置属性设置为fixed。这样，它的位置基于浏览器窗口而不是父窗口。对于没有内容的fixed<div>，您必须指定width 和height 属性。如果希望宽度与父级相同，可以使用inherit 值。

.menu{
  position: fixed;
  height: 300px;
  width: inherit;
  background: orange;
  left: 10px;
  top: 10px;
}

【讨论】：