Question

我有一个网站，我在页面底部有两个按钮，如下所示：

我还有<footer>标记中的另一个div。所以它看起来像这样：

<body>
   ...
   <div class="fixed-to-bottom">
       <input type="button" class="button1-in-bottom fixed-bottom" />
       <input type="button" class="button2-in-bottom fixed-bottom" />
   </div>

   <footer>
        <input type="button" class="button-in-footer" />
   </footer>
</body>

这是使button1-in-bottom和button2-in-bottom固定在底部的css：

.fixed-bottom {
    position: fixed;
    bottom: 0px;
   z-index: 2;
   left: 0;
}

当我向下滚动（所以我转到页面底部）时，我希望位于页脚的底部位于其他两个按钮之上，如下所示：

但我找不到如何做到这一点的方法。任何人都可以帮我找到解决这个问题的方法吗？谢谢！

我的代码段示例：

body {
  background-color: #cdcdcd;
}
.fixed-bottom-xs {
    position: absolute;
    bottom: 0;
    z-index: 2;
    left: 0;
}

.w-100 {
    width: 100%;
}

#select-passengers {
    margin-bottom: -1px!important;
}

.passengers-summary {
    cursor: pointer;
    background-color: white;
    padding: 15px 15px 13px 15px;
    position: relative;
}
.passengers-summary__label {
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;
}

.passengers-summary__passengers {
    display: inline-block;
    vertical-align: middle;
}

.passengers-summary__passenger {
    display: inline-block;
    color: #4D4D4D;
    font-weight: bold;
    margin-right: 5px;
}
.passengers-summary__passenger--adult:before {
    content: "\e916";
}
.passengers-summary__passenger:before {
    font-size: 22px;
    color: #02A39C;
    margin-right: 3px;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}
.btn {
    background-color: #FFA745;
    display: inline-block;
    width: auto;
    padding: 16px 12px 15px;
    font-family: "Montserrat", sans-serif, "Verdana";
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    border: none;
}
.btn--no-radius {
    border-radius: 0;
}
.btn--block {
    display: block;
    width: 100%;
}
.footer__container {
    background-color: #F0F0F0;
    padding: 15px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
}

@media only screen and (min-width: 0px)
.container {
    width: 100%;
}

.container {
    margin: 0 auto;
    padding: 0 10px;
}
.footer {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
}

<body>
<div class="fixed-bottom-xs w-100 mobile-only" >
  <div class="w-100 mobile-only cta-bottom">
    <div class="passengers-summary" data-show="#passengers_layer" id="select-passengers">
		    <div class="passengers-summary__content">
          <span class="passengers-summary__label">Passengers</span>
          <div class="passengers-summary__passengers">
            <div class="passengers-summary__passenger--adult passengers-summary__passenger">x1</div>
          </div>
        </div>
    </div>
  </div>
  <button type="submit" class="btn btn--block btn--no-radius">Continue</button>
</div> 

<footer class="footer__container">
    <div class="container">
     <div class="footer">
  		<div class="footer__links">
         <p class="footer__link" data-modal-open="modal-legal">Aviso legal, política de privacidad y cookies</p>
       </div>
     </div>
</div>
</footer>
</body>

如您所见，footer位于底部按钮后面。但是当我向下滚动时，我希望button-in-footer显示在button1-in-bottom上方。关于如何实现这一目标的任何想法？

Answer 1

您可以将.fixed-bottom-xs div的底部值设置为页脚高度，以便它们不会相互重叠

body {
  background-color: #cdcdcd;
}
.fixed-bottom-xs {
    position: absolute;
    bottom: 80px; /* set value equal to height of footer*/
    z-index: 2;
    left: 0;
}

.w-100 {
    width: 100%;
}

#select-passengers {
    margin-bottom: -1px!important;
}

.passengers-summary {
    cursor: pointer;
    background-color: white;
    padding: 15px 15px 13px 15px;
    position: relative;
}
.passengers-summary__label {
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;
}

.passengers-summary__passengers {
    display: inline-block;
    vertical-align: middle;
}

.passengers-summary__passenger {
    display: inline-block;
    color: #4D4D4D;
    font-weight: bold;
    margin-right: 5px;
}
.passengers-summary__passenger--adult:before {
    content: "\e916";
}
.passengers-summary__passenger:before {
    font-size: 22px;
    color: #02A39C;
    margin-right: 3px;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}
.btn {
    background-color: #FFA745;
    display: inline-block;
    width: auto;
    padding: 16px 12px 15px;
    font-family: "Montserrat", sans-serif, "Verdana";
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    border: none;
}
.btn--no-radius {
    border-radius: 0;
}
.btn--block {
    display: block;
    width: 100%;
}
.footer__container {
    background-color: #F0F0F0;
    padding: 15px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
}

@media only screen and (min-width: 0px)
.container {
    width: 100%;
}

.container {
    margin: 0 auto;
    padding: 0 10px;
}
.footer {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
}

<body>
<div class="fixed-bottom-xs w-100 mobile-only" >
  <div class="w-100 mobile-only cta-bottom">
    <div class="passengers-summary" data-show="#passengers_layer" id="select-passengers">
		    <div class="passengers-summary__content">
          <span class="passengers-summary__label">Passengers</span>
          <div class="passengers-summary__passengers">
            <div class="passengers-summary__passenger--adult passengers-summary__passenger">x1</div>
          </div>
        </div>
    </div>
  </div>
  <button type="submit" class="btn btn--block btn--no-radius">Continue</button>
</div> 

<footer class="footer__container">
    <div class="container">
     <div class="footer">
  		<div class="footer__links">
         <p class="footer__link" data-modal-open="modal-legal">Aviso legal, política de privacidad y cookies</p>
       </div>
     </div>
</div>
</footer>
</body>

Answer 2

你应该给你的页脚一个固定的位置，并且z-index高于div或按钮，如下所示：

onStart

.fixed-to-bottom {
    position: fixed;
    bottom: 0px;
    z-index: 2;
    left: 0;
}
.button-in-footer
{
position:fixed;
bottom:0;
z-index:3;
}

如何在固定内容上显示可滚动页脚？

2 个答案: