Question

所以这里的主要问题是我有两个垂直对齐的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上，但是有解决办法吗？我只是想保持两个div之间的距离，即使我调整浏览器的大小。预先感谢。

调整高度时垂直对齐的两个div重叠吗？

0 个答案: