时间戳

首页 > 解决方案 > div 中的按钮在滚动时隐藏在另一个 div 后面

javascript - div 中的按钮在滚动时隐藏在另一个 div 后面

问题描述

我有一个按钮寄存器，如下图所示。它是固定的，当用户滚动页面时，按钮不会移动。在此处输入图像描述

但现在我在页面加载时添加了一个弹出窗口。喜欢：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div>
                <button type="button" class="close" style="color:#FFFFFF;" data-dismiss="modal" aria-hidden="true">&times; </button>
            </div>
            
            <div class="container content-box">
                <div style="padding-top:20px;" class="col-sm-6">
                    <h3 class="rv1">Fed up with Staff Nurse Entrance Exam?</h3 ><h1 class="rv2">Download <span style="color:#ce3328">Nurses Pulse</span> &amp; Prepare for the exam.</h1>
                    <p class="rv3">NursesPulse is a mobile application for those who are preparing for the staff nurse entrance exam for abroad.
                                                     With NursesPulse you will get the notification of vacancies,apply for the exams and practice for the exams.</p>
                    <a style="background-color:#00b02f;margin-bottom:20px;" class="btn btn-success btn-lg rv4" href="https://play.google.com/store/apps/details?id=com.bluroe.nursespulse"><i class="fa fa-android" aria-hidden="true"></i> Download Android Application</a>
                </div>

                <div class="col-sm-6 text-center">
                    <img class="image" src="images/phone.png" />
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

现在当页面滚动时，当按钮到达这个特定的 div 时，它会隐藏在它后面，当 div 结束时，它会再次显示。下面是我的弹出CSS

.popup
{
    position: absolute;
    top: 0px;
    left:40%;
    z-index: 1030;
}
.isAnswerStyle{
    color: #090;
    font-weight: bold;
}
#img-upoloader{
    padding-bottom: 10px;
}
.bg{
   background: url("images/bg.jpg") no-repeat center top fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.content-box {
    display: table;
    padding-top: 100px;
    color: #FFF;
    font-family: 'Raleway', sans-serif;
}
.content-box p{
    color: #EEE;
}

我该如何解决这个错误？

谢谢。

标签： javascriptjqueryhtmlcss

解决方案

您应该可以通过向z-index按钮或按钮容器添加 high 来解决此问题：

.button {
   z-index:50;
}

z-index控制页面上元素的深度。例如，如果页面上同一位置的两个绝对定位元素具有不同z-index的 ，则较高的那个z-index将出现在顶部。

只要确保你的按钮z-index比你的弹出窗口高。

推荐阅读