我有一些元素作为图层工作(所有元素都是绝对定位的并且带有 z-index)。
主要的问题是,我有一张图片应该放在 我的视口(viewport)高度 (vh) 的底部 0
我已经尝试过底部定位、垂直对齐和平移,这些解决方案有时会起作用,但只适用于我的原始分辨率,当我开始测试响应式时,它们就搞砸了! (即使我使用 % of positioning)。
这是我的最后一张照片:
<div className={`${styles.personWrapper} hidden-xs hidden-sm`}>
<div className={styles.personPositioning}>
<img src={person} className={styles.person} alt="person" />
</div>
</div>
CSS
.personWrapper {
width: 100%;
height: 100%;
height: auto;
z-index: 91;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.personPositioning {
overflow:hidden;
}
.person {
width: 43.4%;
display: inline-block;
position: absolute;
z-index: 60;
opacity: 0;
animation: fadein 0.1s 2.4s;
animation-fill-mode: forwards;
bottom: -10px;
// transform: translate(58%,22%);
}
其他尝试:
.personWrapper {
width: 100vw;
height: 100vh;
z-index: 91;
position: relative;
left: 0;
right: 0;
bottom: 0;
}
.personPositioning {
overflow:hidden;
}
.person {
width: 43.4%;
display: inline-block;
position: absolute;
z-index: 60;
opacity: 0;
animation: fadein 0.1s 2.4s;
animation-fill-mode: forwards;
bottom: -10px;
// transform: translate(58%,22%);
}
最佳答案
解决方案:我已经填充了整个包装 div 和掉落的 div 我在下一个 div 中使用了 top: -50vh。
<div className={`${styles.personWrapper} hidden-xs hidden-sm`}>
<div className={styles.personPositioning}>
<img src={person} className={styles.person} alt="person" />
</div>
</div>
<div className={styles.anotherDiv}>
content
</div>
.personWrapper {
width: 100vw;
height: 100vh;
z-index: 91;
position: relative;
left: 0;
right: 0;
bottom: 0;
}
.personPositioning {
overflow:hidden;
}
.person {
width: 43.4%;
display: block;
position: absolute;
z-index: 60;
opacity: 0;
animation: fadein 0.1s 2.4s;
animation-fill-mode: forwards;
bottom: 0;
left: 25%;
}
.anotherDiv {
top: -50vh;
}
关于javascript - 根据 vh 将垂直元素对齐到所有分辨率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48564960/