Css元素被另一个元素隐藏

Question

我正在为具有当前结构的元素添加工具提示：https://jsfiddle.net/bielus86/08vbbLvw/1/

我无法让tooltip-cla出现在页面div的顶部。 有没有办法为tooltip-cla元素添加一些css类？

理想情况我不想添加任何javascript代码。

＆＃13;

＆＃13;

.mainNav {
  /* box-sizing: border-box; */
  height: 582px;
  margin-top: 80px;
  background: #ffffff;
  position: absolute;
  min-height: 82px;
  border: 1px solid #b2b2b8;
  border-left: 0;
  border-right: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 500;
}

.wrapper {
  background-color: transparent;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 300px;
  left: 0px;
  display: block;
}

.tooltip-cla {
  color: #999777;
  display: block;
  position: absolute;
  left: auto;
  right: auto;
  top: -30px;
  bottom: auto;
  width: 40px;
  height: 40px;
  border: 2px solid #444;
  padding: 16px;
  z-index: 999;
}

＆＃13;

<div class="mainNav">
  <div class="wrapper">
    <div class="tooltip-cla">Main header</div>
      Some text here
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您只是从mainNav中删除overflow: hidden，那么包装器中的overflow-x: auto; overflow-y:auto;是否可以实现您的目标？