HTML + CSS窗体滚动到页眉后面，但仍然可见
HTML + CSS窗体滚动到页眉后面，但仍然可见
提问于 2018-06-16 16:32:12
我正在尝试理解CSS + HTML的一个小项目。当然是学习，我不确定我是否理解了为什么会发生这种情况。
我希望我的标题是固定的，所有的内容滚动到它后面。我已经成功地做到了这一点，然而，一旦它的滚动到它后面，我不希望它在滚动经过标题时可见。这是一个演示这个问题的小提琴。
.container-head {
background-color: #343a40;
color:#fff; position: fixed;
width:100%;
z-index: 1;
}<div class="container-fluid">
<div>
<div class="container-head">
<h4>Insert</h4>
</div>
<div class="container">
<h5>New Entry</h5>
</div>
<div class="container">
<form method="post">
<div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>
<small class="form-text text-muted">Required</small>
</div>
<div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>
<small class="form-text text-muted">Required</small>
</div>
<div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>
<small class="form-text text-muted">Required</small>
</div>
<div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>
<small class="form-text text-muted">Required</small>
</div>
<button class="btn btn-success">Insert</button>
</form>
<br>
</div>
</div>
</div>
任何建议都将不胜感激。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-16 16:47:30
更新了一些样式和HTML
.container-head {
background-color: #343a40;
color: #fff;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
body {
margin: 0;
}
.body-container {
margin-top: 60px;
}
.container-head {
background-color: #343a40;
color: #fff;
position: fixed;
width: 100%;
top: 10px;
z-index: 2;
padding: 10px 0;
}
body {
margin: 0;
}<div class="container-fluid">
<h4 class="container-head">Insert</h4>
<div style="position: fixed; height:72px; width: 100%;background-color: white;top: 0;z-index:1;">
</div>
<div style="margin-top: 100px;position: relative;">
<h5>New Entry</h5>
<form method="post">
<div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>
<small class="form-text text-muted">Required</small>
</div>
<div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>
<small class="form-text text-muted">Required</small>
</div>
<div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>
<small class="form-text text-muted">Required</small>
</div>
<div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>
<small class="form-text text-muted">Required</small>
</div>
<button class="btn btn-success">Insert</button>
</form>
<br>
</div>
</div>
Stack Overflow用户
发布于 2018-06-16 16:37:44
您可能忘记了重置边距。
您可以将这样的代码块放在CSS文件的开头或<style>标记内。
* { margin: 0; }这基本上从一开始就重置了所有元素的边界。
许多网站开发人员在开始一个新项目时就会这样做。希望这能有所帮助。
Stack Overflow用户
发布于 2018-06-16 16:43:36
非常简单的解决方法，只需将以下规则添加到.container-head：top: 0px;这意味着它将位于页面的最顶部，并且您看不到它后面的任何东西，因为视口结束了！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50886290
复制相关文章
相似问题