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

Question

我正在构建悬停 div 以用于 Angular 指令。此悬停 div 出现在任何有标签按钮的地方。目前我的问题是标签按钮位于此 tag-column 内且带有属性 overflow-y: auto; 悬停出现在列内。

I need the overflow property in order to allow scrolling inside of the tag-column. Without it you can't scroll the tags.

<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) 解决方案？

Answer 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

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

How to make this div appear outside of a container with overflow-y:auto?

css

sass

css-position