Question

我有两个div

<div class="one">contains a massive image with fixed height and width</div>
<div class="two">contains popup</div>

.one {
        background-image: url("image");
        background-position: left top; 
        background-repeat: no-repeat;
        background-color: transparent;

        height:900px;
        width:1000px;

        margin:0 auto;
}

.overlay {
    background:rgba(0,0,0,0.8);
    bottom:0;
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index:4;
    display: block;
    opacity: 1;

    }

    .popupwrapper{
        background:white;
        height: 100%;
        max-width: 300px;
        width: 100%;
        max-height: 320px;
        text-align: center;
        padding:3em;
        margin: 0 auto;
        margin-top: 120px;

        //for small screens
        margin-left: 40px;  
    }

我遇到的问题是，因为当我在手机上查看时，div“one”是固定大小，弹出窗口实际上并不显示在屏幕的中央，而是显示在屏幕的中心。笔记本屏幕。我尝试使用在小屏幕上留下的边距来修复此问题，该屏幕将div放在移动屏幕中间。但是，当我滚动因为div有一个边距 - 左边它不会坐在我滚动的中心。

此外，这似乎只发生在Safari中（没有边距左侧或固定的最大宽度，div在移动屏幕上看起来很大）但在Chrome中是不是很好？

两个问题：

如何阻止div滚动？我试过溢出但它仍然滚动。
Safari只有一个CSS黑客攻击吗？我尝试了很多，但似乎没有一个工作？

Answer 1

我从你的问题中了解到，你想要显示一个总是位于屏幕中间并且在其余部分之上的叠加层。

如果模态的大小是固定的，那么你可以这样做：

.one {
  position: absolute;
  top: 50%;
  left: 50%;

  margin: -450px 0 0 -500px;

  width: 1000px;
  height: 900px;
}

示例：click

对于移动设备，只有叠加层的大小才有意义。也许在移动设备屏幕上使用媒体查询可以有不同的尺寸？

Answer 2

可能是任何元素的高度超过其实际高度。这就是滚动即将到来的原因。

弹出式div不在移动设备的屏幕中间

2 个答案: