Question

我有以下HTML＆amp; CSS，它让我垂直居中一个元素。

我还有一个模糊的背景元素，使用z-index

放在后台

如果我将窗口调整到中心元素导致溢出（x或y）的点，则垂直或水平滚动窗口将使元素固定在其位置上。

从position:fixed删除.page-content会导致background-blur div出现在元素前面。

当窗口太小而无法显示整个元素时，我该怎么做才能使窗口可滚动？

HTML（包裹在体内）：

<div class="container">
        <div class="background-blur"></div>
        <div class="page-content">
          <div class="vertical-center">
              <div class="col-sm-12 text-center">
                <div class="col-xs-4 col-xs-offset-4">
                  <div class="centered-placeholder" style="width:500px; height:750px; background-color:black;"></div>
                </div>
              </div>
            </div>
        </div>
      </div>

CSS：

  .container {
    height:100%;
    min-height:750px;
    overflow:auto;
  }

  .background-blur {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height:500px;
    background:url("somefile.jpg");
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
    filter: blur(50px);
  }

  .page-content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1030;
  }

  .vertical-center{
    height:750px;
    margin-top:100px;
  }

  @media (min-height: 750px) {
    .vertical-center {
      margin-top: 0px;
      min-height: 750px;
      height: 100vh;
      display: flex;
      align-items: center;
    }
  }

Answer 1

您是否尝试在position: absolute|relative;上使用.page-content？您需要非静态position才能应用z-index。您选择了fixed，但缺点是fixed元素根据定义不会滚动。

尝试切换到position: absolute;或position: relative;以维护z-index，同时获得滚动功能！

垂直居中的元素在溢出时不滚动

1 个答案: