CSS位置：固定的元素和边距

我试图创建一个粘性搜索框，以便它始终在滚动时位于页面的顶部。但是，我希望它占用容器的100％，而不是窗户。CSS位置：固定的元素和边距

下面是一个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

来源

2014-10-06 max1221

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

如果它是你没问题，从.searchbox删除position: fixed;，并把它添加到.container

来源

2014-10-06 17:57:53 helllomatt

感谢您的回答！这会创建搜索框的适当边距，但搜索框不再粘性。 – max1221 2014-10-06 17:59:16

这使得整个容器变得粘稠，而不仅仅是搜索框。你是否希望容器停留，只有搜索框移动？ – Bobo 2014-10-06 17:59:46

我需要容器能够滚动，但搜索框要坚持顶部。 – max1221 2014-10-06 18:08:51

这是不可能的，固定的位置得到的跳出流程。

但是一种替代解决方案：

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

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

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

来源

2014-10-06 18:03:01 Filipe

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

我想你在找什么或者是：

StickyMojo或jQuery的Stickem

引导也有类似的事情，所谓词缀。

来源

2014-10-06 18:09:02 coopersita

CSS位置：固定的元素和边距

回答

相关问题