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

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 中看到实际效果。（添加了一些边框和间距，以便更容易看到发生了什么。）

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

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

How to allow list positioned absolute, to break out of fixed element?

html

css

css-position