Question

我在这里遇到一些问题，我无法修复它。

我正在做一个单页网站，我的导航栏上有3个链接，只要我点击其中一个链接就应该向下滚动到特定的div，然后就可以了。但现在它落后于我设置的固定标题。

HTML

<div class="header1">
            .... blablabla...
</div>

        <div class="navigbox">
            <div class="navig">
                <a href="#intro">About</a>  
            </div>
        </div>

        <div id="intro">                
                some text
        </div>

CSS

.header1{
    height: 20%; width: 100%;
    position: fixed;
    z-index: 1;
    left:0;
    right:0;
    top: 0;
    margin-left:auto;
    margin-right:auto;}

.navigbox{
    background: white;
    position: fixed;
    z-index: 1;
    height: 10%; width: 80%;
    left: 10%;
    top: 20%;}  

.navig{
    height: 100%; width: 33.33%;
    float:letf;}    

#intro{
    background: white;
    height: 60%; width: 70%;
    left: 10%;
    top: 30%;
    position: absolute;
    padding: 5% 5% 0 5%;}

Answer 1

作为乔治答案的替代方案，您可以通过在div内的第一个元素的顶部应用边距来添加所需的空间。这样你就不需要任何额外的元素了。虽然填充百分比（顶部/底部和左/右）是相对于父级的宽度计算的，但是高度％显然是相对于父级的宽度，因此完全按照它的方式获得它会很棘手。父母的身高。

Answer 2

这是因为当页面滚动时不考虑标题的高度。不要将id应用于div本身，而是将另一个元素（例如a）放在它之前，然后用两个br分隔两个元素。

编辑：This answer有更好的方法。

Answer 3

在CSS中，其他元素与header1重叠，因为它们具有更高或相等的z-index。将标题1的z-index设置得更高而不是一个

使用HTML锚标记后，内容隐藏在标题后面

3 个答案: