Question

我正在尝试创建一个粘性搜索框，以便在滚动时始终位于页面顶部。但是，我希望它占据容器的100％，而不是窗口。

这是一个HTML标记示例：

<div class="container">
    <div class="searchbox">
        Search Box
    </div>
</div>

和CSS：

.container {
    background-color: blue;
    width: 300px;
    padding: 20px;
    height: 40px;
    overflow-x: hidden;
}

.searchbox {
    background-color: red;
    position: fixed;
    width: 100%;
}

这里有一个当前正在发生的事情的小提琴：http://jsfiddle.net/09ynr879/

我希望它在右侧缩进与左侧相同的数量。有任何解决这个问题的方法吗？我想在左侧和右侧均匀地位于中心，边缘相同。

提前致谢。

以下是我们遇到问题的实际网站的屏幕截图： http://s2.postimg.org/dlj47yqix/Screen_Shot_2014_10_06_at_11_08_24_AM.png

注意搜索框如何从正确的位置开始，但是在页面的末尾结束，而不是在容器的末尾。我们正在使用Bootstrap 3.2

Answer 1

position: fixed的元素没有相对父母。它们总是相对于页面固定。

如果您没问题，请从position: fixed;移除.searchbox并将其添加到.container

Answer 2

这是不可能的，固定的位置不在流程之内。

但另一种解决方案是：

.container {
    background-color: blue;
    width: 300px;
    padding: 20px;
    height: 40px;
    position: fixed;
}

.searchbox {
    background-color: red;
    width: 100%;
}

http://jsfiddle.net/09ynr879/4/

Answer 3

固定位置始终是整个窗口。如果你想只为容器做这件事，你需要JavaScript。

我认为你要找的是：

StickyMojo或jQuery Stickem

Bootstrap有类似的东西，叫做Affix。

CSS位置：固定元素和边距

3 个答案: