Question

我正在设计使用Bootstrap 4的网站。我想在右侧添加到此粘性侧栏。我的总体目标是拥有两个方框-1（内容）和2（侧栏）。

我设法为移动设备以外的设备正确放置了盒子。然后，对于移动设备，我希望在内容上方具有侧边栏，因此在1上方具有2。

这部分有点挣扎。正确堆叠它们没有问题。问题是事实，方框2重叠了1。我不确定如何解决这个问题。

我有以下代码

<style>
    .content-section {
    min-height: 2000px;
  }

  .sidebar-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .make-me-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
</style>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="content-section card card-body">
                <div>1</div>
            </div>
        </div>
        <div class="col-md-4 order-first order-md-last">
            <div class="sidebar-item">
                <div class="make-me-sticky">
                    <div class="card card-body">2</div>
                </div>
            </div>
        </div>
    </div>
</div>

您可以在此处查看演示： https://www.codeply.com/go/IiDkjH70EY

Answer 1

   <style>
    .content-section {
    min-height: 2000px;
  }

  .sidebar-item {
    position: relative; /* Change From absolute TO relative */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .make-me-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
</style>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="content-section card card-body">
                <div>1</div>
            </div>
        </div>
        <div class="col-md-4 order-first order-md-last">
            <div class="sidebar-item">
                <div class="make-me-sticky">
                    <div class="card card-body">2</div>
                </div>
            </div>
        </div>
    </div>
</div>

手机上的Bootsrap 4重叠式粘性侧边栏

1 个答案: