Question

目前，我已经做到这一点，侧边栏出现在“适用”的位置。页面开始。当用户继续向下滚动时，我希望侧边栏保持在该位置。令我困惑的另一件事是，当我将这个位置设置为“绝对”时。对于酒吧，它完全消失了。为什么会这样？

CSS：

degree

HTML：

#navbar {
    background-color: black;
    overflow: auto;
    height: 100%;
    width: 25%;
    z-index: 1000;
    float: right;
}

#navbar-links {
    list-style-type: none;
    display: block;
}

#apply {
    background-color: red;
}

#about {
    background-color: orange;
}

#sponsor {
    background-color: green;
}

Answer 1

您需要使用position: fixed修正视图的位置。

然后，您可以使用：top right left和bottom将元素放在您想要的位置。因此right: 0;和top: 0;将元素0px从右侧和顶部放置。

对于绝对位置也是如此，如果你没有使用任何可能导致它消失的原因。

有关css位置属性的详细信息，请参阅此处：http://www.w3schools.com/cssref/pr_class_position.asp

＆＃13;

#navbar {
    position: fixed;
    right: 0;
    top: 0;
    background-color: black;
    color: white;
    overflow: auto;
    height: 100%;
    width: 25%;
    z-index: 1000;
}

#navbar-links {
    list-style-type: none;
    display: block;
}

#apply {
    background-color: red;
}

#about {
    background-color: orange;
}

#sponsor {
    background-color: green;
}

＆＃13;

<div id="pages">
    <!-- apply page -->
    <div id="apply" class="sections" tabindex='2'>
        <!-- navigation bar -->
        <div id="navbar">
            <ul id="navbar-links">
                <li>Apply</li>
                <li>About</li>
                <li>Sponsor</li>
            </ul>
        </div>
        <div class="container">

        </div>  
    </div>

    <!-- about page -->
    <div id="about" class="sections" tabindex='3'>
        <div class="container">

        </div>        
    </div>

    <!-- sponsor page -->
    <div id="sponsor" class="sections" tabindex='4'>
        <div class="container">

        </div>        
    </div>
</div>

＆＃13;

如何制作侧边栏？

1 个答案: