html - 如何让列表绝对定位，打破固定元素？

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

您可以通过给 ul 一个宽度来将 li 元素从列中分离出来:

.carousel ul {
  width: 300px;
}

您可以在 forked codepen 中看到实际效果. (添加了一些边框和间距，以便更容易看到发生了什么。)

希望对您有所帮助。祝你好运!