Question

我在重叠两个div时遇到了烦人的问题。我使用视差js来获得响应背景，我还在顶部有一个jumbotron（bootstrap 3）。当我向下滚动页面时，jumbotron跟随并溢出到下面的内容中。我想把jumbotron放在我的视差背景之上。对不起，如果这听起来令人困惑，我不是一个放弃的人，但我可能已经咬掉了比我可以咀嚼更多的东西。非常感谢任何帮助:-) thanks

到目前为止

代码：

 HTML:

  <div class="jumbotron"> 
    <div class="row text-center">

            <h1>Fashionable Fondants</h1>
            <h3>"developing your <span>creative side"</span></h3>
            <a href="about.html" class="btn btn-primary btn-lg">Who We Are</a>
        </div>

               </div><!-- end jumbotron -->
                <div class="bg" data-ibg-bg="img/bg.jpg"> 
                        </div><!-- end bg -->

CSS：

    .bg {
      height: 760px;
      width: 100%;
      margin: none;
      background-repeat:no-repeat;
      overflow: hidden;}

     .jumbotron{
       position: fixed;
       background: none;
       max-height: 800px;
       padding: 0px 0;
       z-index: 2;
       width: 100%;
       margin-top: 10%;}

使用的Parallax插件可在此处找到：https://github.com/peachananr/interactive_bg

Answer 1

您已将您的jumbotron设置为position：fixed。所以它正在按照你的要求去做。你必须删除position：fixed。

现在，如果您希望将jumbotron放置在屏幕高度的前100％，则创建一个假容器。将html和身高调整为100％。使假容器位置：相对，所以你可以将jumbotron放在里面。

html, body {
    height:100%;
}
.fake-body { height:100%; position:relative; }
.jumbotron {
    background: none;
    height: 400px;
    width: 100%;
    position:absolute; top:50%; margin-top:-200px;
}

https://jsfiddle.net/L0fd14y2/7/

供参考：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

使用固定位置时防止溢出

1 个答案: