我在主页上添加了一个粘性标题，但是粘性标题似乎位于页面上其余内容的后面，因此当我向下滚动页面时，图像和文本位于标题顶部，有没有办法阻止这一切？
这是我的代码：
<style>
/* Reset body padding and margins */
body
{
margin: 0;
padding: 0;
}
/* Make Header Sticky */
#header_container
{
background: #827878;
border: 1px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header
{
line-height: 60px;
margin: 10 auto;
width: 940px;
text-align: left;
font-size: 26px;
color: #f5f5f5;
line-height: 28px;
margin-bottom: 14px;
font-family: 'Source Sans Pro',sans-serif;
}
/* CSS for the content of page. I am giving top and bottom
padding of 80px to make sure the header and footer
do not overlap the content. */
#container
{
margin: 0 auto;
overflow: auto;
padding: 80px 0;
width: 940px;
}
#content
{
}
/* Make Footer Sticky */
#footer_container
{
background: #eee;
border: 1px solid #666;
bottom: 0;
height: 60px;
left: 0;
position: fixed;
width: 100%;
}
#footer
{
line-height: 60px;
margin: 0 auto;
width: 940px;
text-align: center;
}
</style>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
添加此代码：在
z-index: 1000#header_containerz-index: 1001#header#header_container {
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
}
#header {
z-index: 1001;
}
我正在寻找一个解决方案，以便我可以为我的客户使用它，幸运的是，我找到了一个解决方案，如果您在该容器内使用名为 Elementor 的 WordPress 插件，您可以放置类似于下面代码的代码，该解决方案也可以工作.
.sticky-cssSelector-here {
position: sticky;
top: 0;
/* for alignment below */
align-self: flex-start;
height: calc(100vh - 45px); /* this is to set a fixed height in different screen sizes and 100 view height for a maximum height of the element */
padding-top: 100px; // here you can adjust this one as well to make your element viewable
注意：CSS 选择器是您应该放置在要插入的元素内的选择器。
如果这不起作用，您可以尝试下面的代码： 位置：绝对； z 索引：9999；
只需使用 z-index 参数。 例如z-index：2（表示层的顺序） 它仅适用于使用位置的元素：绝对、相对或固定
W3schools 示例： http://www.w3schools.com/cssref/pr_pos_z-index.asp
CSS Deck 有一篇关于制作粘性标题的文章。这是代码：
<style type="text/css"> body{ margin:0px; background:#000; } .header-cont { width:100%; position:fixed; top:0px; } .header { height:50px; background:#F0F0F0; border:1px solid #CCC; width:960px; margin:0px auto; } .content { width:960px; background: #F0F0F0; border: 1px solid #CCC; height: 2000px; margin: 70px auto; } </style> </head> <body> <div class="header-cont"> <div></div> </div> <div></div>
在您的标题中添加：
position:absolute;
z-index:9999;
这将使其凌驾于一切之上