CSS定位：固定元素和边距

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。

- max1221

Answer 1

position: fixed的元素没有相对父级，它们始终固定于页面。

如果可以，请将.searchbox中的position: fixed;移除，然后添加到.container中。

- helllomatt

---

谢谢您的回答！这会创建出适当的搜索框边距，但是搜索框不再粘性。 - max1221

这会使整个容器变得粘性，而不仅仅是搜索框。您想让容器保持不动，只有搜索框移动吗？ - Bobo

我需要容器能够滚动，但搜索框要固定在顶部。 - max1221

据我所知，没有一种仅使用CSS就能实现这个的方法。必须涉及JS。 - helllomatt

请看一下我在第一篇帖子中添加的截图，也许会更清楚。真的不想在这个问题上退回到JS。 - max1221

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/

- Filipe

Answer 3

固定位置（Position fixed）始终是整个窗口的。如果您只想对一个容器进行此操作，则需要使用JavaScript。

我认为您要找的是：

StickyMojo或jQuery Stickem

Bootstrap也有类似的功能，称为Affix。

- coopersita