Question

我有一个按钮寄存器，如下图所示。它已修复，当用户滚动页面时，按钮不会移动。

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

＆＃13;

<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>

＆＃13;

现在当页面滚动时，当按钮到达此特定div时，它隐藏在它后面，当div结束时，它再次显示。下面是我的popup css

＆＃13;

.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;
}

＆＃13;

如何解决此错误？

感谢。

Answer 1

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

.button {
   z-index:50;
}

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

只需确保您的按钮的弹出窗口高z-index。

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

1 个答案: