html - 制作一个 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 属性 position:fixed;。好吧，没那么神奇，但它确实有效。将您的 div 设置为固定位置，使用左、右、上、下、宽度和高度属性为其赋予实际位置和形状。就这么简单。

只要看看它们不同的类是如何工作的，只需将固定 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>