时间戳

首页 > 解决方案 > 如何使用 CSS 使绝对元素具有粘性？

html - 如何使用 CSS 使绝对元素具有粘性？

问题描述

我有以下侧边栏导航面板：

侧边栏导航面板

如您所见，导航栏从网页的最顶部延伸到最底部。这是使用 CSS 完成的。首先是我的 HTML 的结构（为了便于阅读，主要代码被删掉了）：

<div id="app" class="app">
    <!-- Sidebar -->
    <div class="sidebar-container"> </div>

    <!-- Header Nav Bar (holds logo) -->
    <div class="header-container"> </div>

    <!-- Menu that pops up when menu icon is pressed -->
    <div id="pop-up-menu" class="pop-up-menu-container"> </div>

    @yield('content')
</div>

我正在使用 Laravel，这就是该@yield('content')行出现的原因，这是由我的v2_welcome.blade.php文件调用的，如下所示：

@extends('layouts.main')

<!-- Body Section -->
@section('content')
    <div class="landing-image-container">
        <!-- THIS HAS THE BACKGROUND IMAGE SEEN ON SCREEN -->
    </div>

    <div class="test">
        hey
    </div>
@endsection

侧边栏的 CSS 如下所示：

.sidebar-container {
    /* location */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;

landing-image-container当我在（即）之后插入任何元素时，就会出现我的问题，<div class="test">因为当我向下滚动查看它时会发生这种情况：

侧边栏不固定位置

你可以看到导航栏随着页面滚动，我如何让它固定在适当的位置？

谢谢！

标签： htmlcsslaravel

解决方案

您可以使用position: fixed而不是使用来执行此操作position: absolute。

body {
  height:2000px;
}

.sidebar {
  background:blue;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:60px;
}
<body>
  <div class="sidebar">
  </div>
</body>

推荐阅读