Кнопка в div при прокрутке прячется за другим div

У меня есть кнопочный регистр, как на изображении ниже. Это исправлено, и когда пользователь прокручивает страницу, кнопка не перемещается. Кнопка в 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;
}

Как исправить эту ошибку?

Спасибо.

Должна быть проблема с z-index

Ankit Agarwal 11.06.2018 09:11

Как я могу это исправить

Zubair Nazer Oliyat 11.06.2018 09:12

Проведите небольшое исследование сейчас. Не полагайтесь на кормление с ложки.

Ankit Agarwal 11.06.2018 09:13

согласовано. z-index уже очень помогает.

Sampgun 11.06.2018 09:19

отправьте вам коды html и css.

Aryan Twanju 11.06.2018 09:31

@AryanTwanju я разместил html

Zubair Nazer Oliyat 11.06.2018 10:55

также опубликуйте код css

Aryan Twanju 11.06.2018 11:04

@AryanTwanju, я это опубликовал

Zubair Nazer Oliyat 11.06.2018 11:09

ваш код html и css, похоже, не связан с изображением, которое вы показали

Aryan Twanju 11.06.2018 11:17

изображение, которое я показал, не во всплывающем окне. это моя домашняя страница. всплывающее окно появляется при загрузке страницы

Zubair Nazer Oliyat 11.06.2018 11:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
10
121
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете исправить это, добавив высокий уровень z-index в свою кнопку или контейнер кнопки:

.button {
   z-index:50;
}

z-index контролирует глубину элемента на странице. Например, если два абсолютно позиционированных элемента в одном и том же месте на странице имеют разные значения z-index, то элемент с более высоким значением z-index появится поверх.

Просто убедитесь, что ваша кнопка имеет более высокий z-index, чем ваше всплывающее окно.

я уже сделал это так .sniper {position: fixed; верх: 0; ширина: 100%; z-индекс: 100; маржа сверху: 5 пикселей; }

Zubair Nazer Oliyat 11.06.2018 10:58

@ZubairNazerOliyat какой z-индекс всплывающего окна? Пожалуйста, опубликуйте соответствующий CSS в вопросе

Claire 11.06.2018 11:03

я разместил CSS сейчас

Zubair Nazer Oliyat 11.06.2018 11:09

@ZubairNazerOliyat Хорошо, я понял. Как я уже сказал в своем ответе, сверху появится элемент с наивысшим z-индексом. Ваше всплывающее окно имеет z-index 1030. Либо измените его на меньше 100, либо измените z-index кнопки на более 1030

Claire 11.06.2018 11:41

Другие вопросы по теме