два деления выровнены по вертикали при изменении размера по высоте? - PullRequest
Новая
       42

два деления выровнены по вертикали при изменении размера по высоте?

0 голосов
/ 24 сентября 2019

Таким образом, основная проблема здесь в том, что у меня есть два div, выровненных по вертикали, и когда я пытаюсь изменить размер браузера (особенно уменьшая высоту), div на нижнем перекрывается с верхним div.

HTML 

<body>
    <div class="parent-container">
        <div class="parallax-group">
            <div class="parallax-layers">
                <div class="subtitle-layer"></div>
                <div class="title-layer"></div>
            </div>
        </div>
    </div>
</body>

CSS 

html, body {
    width:100%; height:100%; 
    color:white;
    font-family:Montserrat,Arial,Helvetica,sans-serif; 
    font-weight:700;
}
* {padding:0; margin:0; box-sizing:border-box;}
a {text-decoration:none; color:#fff;}

.parent-container {
    height:100vh;                       
    perspective:300px; 
    overflow-x:hidden;                  
    overflow-y:auto;
}

.parallax-group {
    height:100vh;                   
    width:100%; 
    position:relative;          
    transform-style:preserve-3d; 
    border:5px solid black; 
}

.parallax-layers {position:absolute; top:0; left:0; right:0; bottom:0;} 
.subtitle-layer,.title-layer {position:absolute;}

.subtitle-layer {top:20vh; left:50%; z-index:-1;}

.title-layer {
    width:100vw; top:43%; left:0;
    text-align:center; transform:translateZ(-240px)translate(0,-19vw);
}

это иллюстрация: 

___________________
|                 |
|  subtitle-layer |
|                 |
-------------------
___________________
|                 |
|   title-layer   |
|                 |
-------------------

при изменении размера браузера 

___________________
|                 |
|_________________|
|  subtitle-layer |
|                 |
-------------------
|   title-layer   |
|                 |
-------------------

Я думаю, что проблема с perspective, но есть ли способ решить эту проблему?я просто хочу сохранить расстояние между этими двумя элементами даже при изменении размера браузера.заранее спасибо.

...