Question

我有一个垂直条，其中的项目旁边有一个信息字段。信息字段我定位为绝对。现在，当我使用＆＃34; overflow-y滚动＆＃34;物品消失了。但根据开发人员的工具，他们仍然存在。更改z-index无效。我在这里创建了一个工作示例https://jsfiddle.net/x8h69ghj/1/

的CSS：

#bar {
  background-color: lightyellow;
  position: absolute;
  left: 18px;
  width: 60px;
  max-height: 200px;
  /* XXX removing this will show the .info divs */
  overflow-y: scroll;
}

.item {
  position: relative;
}

.button {
  background-color: lightgrey;
  width: 50px;
  height: 30px;
}

.info {
  position: absolute;
  top: 0;
  left: 100px;
}

html：

<body>
<div id="bar">
  <div class="item">
    <div class="button">      button    </div>
    <div class="info">info</div>
  </div>
  <div class="item">
    <div class="button">      button    </div>
    <div class="info">info</div>
  </div>
  <div class="item">
    <div class="button">      button    </div>
    <div class="info">info</div>
  </div>
  <div class="item">
    <div class="button">      button    </div>
    <div class="info">info</div>
  </div>
  <div class="item">
    <div class="button">      button    </div>
    <div class="info">info</div>
  </div>
  <div class="item">
    <div class="button">      button    </div>
    <div class="info">info</div>
  </div>
  <div class="item">
    <div class="button">      button    </div>
    <div class="info">info</div>
  </div>
</div>
</body>

删除＆＃34; overflow-y：滚动＆＃34;来自#bar将使.item div显示。

这可能是一个非常基本的CSS问题，但我无法弄清问题是什么。我非常感谢有关为什么在滚动栏时不显示.item div的任何提示。

非常感谢！

Answer 1

您的.info班级有position: absolute和left: 100px;：

.info {
  position: absolute;
  top: 0;
  left: 100px;
}

left: 100px;在这种情况下就像偏移：原始位置是里面父元素（在这种情况下是#bar，因为{{1没有宽度设置），但.item将其向右移动100px。

left: 100px;可能会让它显示出来。如果允许滚动条（带position: absolute），则可以通过滚动访问偏移位置，否则，它只会显示在父元素外部（由于偏移）。如果您将父级宽度（overflow-y: scroll）更改为160px，您还会看到信息div（没有滚动条）...

Answer 2

@senorpedro UI上存在所有元素。向右滚动，你会看到它们。快速修复是从宽度增加bar类的宽度：60px;宽度：160px;你可以根据自己的需要进行调整。

#bar {
  background-color: lightyellow;
  position: absolute;
  left: 18px;
  width: 160px; /* changed */
  max-height: 100px;
  /* XXX removing this will show the .info divs */
  overflow-y: scroll;
}

https://jsfiddle.net/vmk8fcgv/

＆＃34;溢出-y：滚动＆＃34;使用＆＃34; position：absolute＆＃34;制作嵌套的div。消失

2 个答案: