制作Div视差

Question

我有div，我想留下来让导航栏和其他人只是通过它。

这是我目前的工作：

<div class="holder">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://placehold.it/1920x1080" class="img-responsive center-block">
            </div>

            <div class="item">
                <img src="http://placehold.it/1920x1080 " class="img-responsive center-block">
            </div>
        </div>
    </div>

    <div id="headerCaption">
        <img src="{{ asset('img/CaptionBg.png') }}" id="curve" class="img-responsive center-block">
    </div>
</div>

<div id="nav-wrapper">
    <nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
        <div class="container">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="{{ asset('img/logo.png') }}"></a>
            </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-shopping-cart"></i> Cart</a></li>
                    <li><a href="#"><i class="fa fa-user"></i> Sign Up/Login</a></li>
                </ul>

            <!-- Nav links -->
            <div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
                <ul class="nav navbar-nav" id="nav-section">
                    <li class="current active">
                        <a href="#carousel">First Section</a>
                    </li>

                    <li>
                        <a href="#section-2">Second Section</a>
                    </li>

                    <li>
                        <a href="#section-3">Third Section</a>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Dropdown link 1</a></li>
                            <li><a href="#">Dropdown link 2</a></li>
                            <li><a href="#">Dropdown link 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- End of navbar collapse -->
        </div><!-- End of Container Fluid -->
    </nav>
</div>

我不知道是否可以仅使用css做什么，或者我需要什么才能坚持下去。如果可能的话，其他div也可以重复使用。我希望你明白我的意思。

Answer 1

这是一个SO片段。这表明如何完成你的要求。

神奇的是 css属性 位置：固定; 。嗯，好吧，没有那么多魔法，但它确实有效。将div设置为固定位置，使用left，right，top，bottom，width和height属性为其提供实际位置和形状。就这么简单。

看看他们不同的类是如何工作的，只需将固定div上的类更改为我作为示例保护的四个类中的一个。

希望这有帮助，

添

div.fixed-top-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

div.fixed-top-right {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

div.fixed-bottom-right {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

div.fixed-bottom-left {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

<div class="fixed-top-left holder">
   This is a fixed div
</div>

<div id="nav-wrapper">
    <nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
        <div class="container">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="{{ asset('img/logo.png') }}"></a>
            </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-shopping-cart"></i> Cart</a></li>
                    <li><a href="#"><i class="fa fa-user"></i> Sign Up/Login</a></li>
                </ul>

            <!-- Nav links -->
            <div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
                <ul class="nav navbar-nav" id="nav-section">
                    <li class="current active">
                        <a href="#carousel">First Section</a>
                    </li>

                    <li>
                        <a href="#section-2">Second Section</a>
                    </li>

                    <li>
                        <a href="#section-3">Third Section</a>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Dropdown link 1</a></li>
                            <li><a href="#">Dropdown link 2</a></li>
                            <li><a href="#">Dropdown link 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- End of navbar collapse -->
        </div><!-- End of Container Fluid -->
    </nav>
</div>