Question

我已使用div将页面中的.xasi-modal__login-modal元素（vertical-align）与-40px对齐，并使用{position: relative从顶部略微偏移{ {1}}。

然而，当.xasi-modal__login-modal到达/触摸页面顶部时，它会消失在其上方。有没有办法让它在.xasi-modal__login-modal“触及”页面顶部时，通过 CSS 或 JS 禁用top: -40px （最好是CSS）？

这是基本的 HTML ＆amp;的 CSS ：

.modal-login__align{
  display: table-cell;
  height: 390px;
  vertical-align: middle;
}
.xasi-modal__login-modal{
  position: relative;
  top: -40px;
  width: 340px;
  height: 390px;
  margin: 0 auto;
}

<div class="modal-login__align">
  <div class="xasi-modal__login-modal"></div>
</div>

小提琴：https://jsfiddle.net/vde3pwtL/

感谢。

Answer 1

您可以使用css media queries来检测max-height。

我们可以通过采用模态max-height并将负数height加倍来计算top值（因为我们是垂直居中的）

<强> JSFIDDLE

<强> CSS

@media (max-height:470px){
    .xasi-modal__login-modal{
        top:0;
    }
}

允许位置相对和顶部直到div触及页面顶部

1 个答案: