Проблема с z-индексом - PullRequest
Новая
       28

Проблема с z-индексом

0 голосов
/ 06 июня 2018

Я занимаюсь разработкой веб-проекта, в котором у меня проблема с z-index.Следующий код просто показывает мою проблему.Когда я перемещаю желтую коробку вправо, она идет под следующей синей рамкой.Я изменил z-index и позицию, но это не сработало.как я могу это исправить?код здесь: 

    <!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
    <div style="background-color:red; width: 500px; height: 500px; position:absolute; z-index: 9;">

        <div style="background-color:green; width: 400px; height: 400px; position:absolute; z-index: 99;">
            <div style="background-color:blue;width: 100px; height: 100px; display:inline-block; position:relative; z-index: 999;">


            </div>
             <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative; z-index: 999;">

                <div style=" background-color:yellow; width: 50px; height: 50px;  display:block; position:relative; left: 70px; z-index: 9999999;"></div>
            </div>
             <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;z-index: 999;">

            </div>
        </div>
    </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Просто установите значение z-index для div, содержащего желтый фон.Вы можете быстро взглянуть на вывод следующего фрагмента кода.Я установил «z-index: 99;»к этому div. 

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
    <div style="background-color:red; width: 500px; height: 500px; position:absolute; ">

        <div style="background-color:green; width: 400px; height: 400px; position:absolute; ">
            <div style="background-color:blue;width: 100px; height: 100px; display:inline-block; position:relative;">


            </div>
             <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;">

                <div style=" background-color:yellow; width: 50px; height: 50px;  display:block; position:relative; left: 70px; z-index: 99;"></div>
            </div>
             <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;">

            </div>
        </div>
    </div>
</body>

</html>
0 голосов
/ 06 июня 2018

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

<div style="background-color:red; width: 500px; height: 500px; position:absolute; ">

<div style="background-color:green; width: 400px; height: 400px; position:absolute; ">
    <div style="background-color:blue;width: 100px; height: 100px; display:inline-block; position:relative;">


    </div>
    <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;z-index: 10;">

        <div style=" background-color:yellow; width: 50px; height: 50px;  display:block; position:relative; left: 70px;"></div>
    </div>
    <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;">

    </div>
</div>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...