如何使用overflow-y:auto 使这个div 出现在容器之外？答案

【问题标题】：How to make this div appear outside of a container with overflow-y:auto?如何使用overflow-y:auto 使这个div 出现在容器之外？
【发布时间】：2015-05-10 19:18:38
【问题描述】：

http://codepen.io/leongaban/pen/waMpwZ

我正在构建要在 Angular 指令中使用的悬停 div。这个悬停 div 出现在任何有标签按钮的地方。目前我的问题是，当标签按钮位于 tag-column 内，属性为 overflow-y: auto; 时，悬停出现在列内。

我需要overflow 属性才能允许在标签列。没有它，您将无法滚动标签。

<li>
  <div class="tag">Tag 1</div>
  <!-- below will appear on ^ tag hover -->
  <div class="tags-hover-container">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</li>

SCSS

.tag-column {
    float: left;
    position: relative;
    overflow-y: auto;
    height: 300px;
    background: #ccc;
    z-index: 1;

    li { margin: 0; width: 100%; cursor: pointer; }
}

.tags-hover-container {
    position: absolute;
    padding: 20px;
    top: 50px;
    left: 50px;
    width: 230px;
    z-index: 10000;
    background: $gray_bg;
    border: 1px solid $gray2;
    @include rounded(3px);
}

有没有办法用 CSS/SASS 解决这个问题？
还是我必须以某种方式依赖 Javascript(Angular) 解决方案？

【问题讨论】：

只需删除overflow-y 声明...我不确定您为什么需要它。 - codepen.io/Paulie-D/pen/waMpGL
@Paulie_D 抱歉，我更新了我的 codepen 标记，我需要它，因为我需要滚动标签。可能有 100 个。
那时似乎不太可能......但比我更聪明的人可能会提供帮助。
溢出-y：可见？似乎执行与完全没有任何溢出相同的操作[使用 Leon 的 codepen 测试，但没有更新]
ul 溢出怎么办？ codepen.io/anon/pen/BNjJzg

标签： css sass css-position

【解决方案1】：

好的，你可以在 ul 上设置溢出而不是父 div。

body {
  font-family: Arial, sans-serif;
}

li {
  list-style: none;
}

.tag-column {
  float: left;
  position: relative;
  background: #ccc;
  z-index: 1;
}
.tag-column ul {
  overflow-y: auto;
  height: 300px;
}
.tag-column li {
  margin: 0;
  width: 100%;
  cursor: pointer;
}

.tag {
  overflow: hidden;
  float: left;
  position: relative;
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  width: auto;
  cursor: pointer;
  clear: both;
  border: 1px solid #E5E5E5;
  background: #F5F5F5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.tags-hover-container {
  position: absolute;
  padding: 20px;
  top: 50px;
  left: 50px;
  width: 230px;
  z-index: 10000;
  background: #F5F5F5;
  border: 1px solid #BFBFBF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

<div class="tag-column">
  <ul>
    <li>
      <div class="tag">Tag 1</div>
      <!-- below will appear on ^ tag hover -->
      <div class="tags-hover-container">
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
      </div>
    </li>
    <li>
      <div class="tag">Tag 2</div>
      <!-- below will appear on ^ tag hover -->
      <div class="tags-hover-container">
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
      </div>
    </li>
    <li>
      <div class="tag">Tag 3</div>
      <!-- below will appear on ^ tag hover -->
      <div class="tags-hover-container">
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
      </div>
    </li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
    <li><div class="tag">Tag X</div></li>
  </ul>
</div>

__在线演示：http://codepen.io/anon/pen/BNjJzg

【讨论】：