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

Question

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

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>

__ demo on line：http://codepen.io/anon/pen/BNjJzg