如何允许列表定位绝对，突破固定元素？

Question

http://codepen.io/leongaban/pen/ZGywrV?editors=110

我有一个列表，哪些项目可以在列内左右滚动。但是该列的位置是固定的，这不会让我的项目突破tag-column div。

目前它看起来像这样：

我希望它看起来像这样：

然后我可以添加overflow-x：hidden，然后添加一个滚动按钮来左右滚动项目。

标记

<!-- position: fixed -->
<div class="tag-col">

  <header>
    <!-- position: absolute -->
    <!-- This needs to break out of column -->
    <div class="carousel">
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
      </ul>
    </div>
  </header>

</div>

定型

ul > li {
  float: left;
  list-style: none;
  margin-right: 10px;
}

.tag-col {
  position: fixed;
  display: block;
  width: 120px;
  height: 500px;
  background: cyan;
}

.carousel {
  position: absolute;
  li {
    float: left;
  }
}

有tag-col成为position:fixed的方法吗？

Answer 1

您可以通过赋予li宽度来打破列中的ul元素：

.carousel ul {
  width: 300px;
}

您可以在forked codepen中查看此操作。 （添加了一些边框和间距，以便更容易看到正在发生的事情。）

希望有所帮助。祝你好运！