我正在尝试理解一个小元素的 CSS + HTML。当然是学习,但我不确定我是否理解为什么会这样。
我希望我的页眉得到修复,所有内容都滚动到它后面。我已经成功地做到了这一点,但是一旦它在它后面滚动,我不希望它在滚动到标题时可见。这是一个演示问题的 fiddle 。
.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>
如有任何建议,我们将不胜感激。
最佳答案
稍微更新了一些样式和 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>
关于HTML + CSS 表单在标题后面滚动但仍然可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50886290/