html - 使用 css 相对和绝对包装图像

Question

我试图在一个 div 中以不可见的方式将图像堆叠在一起，以便您可以在它们之间切换。我的 javascript 可以正常工作，但在理解各种静态/绝对/相对 css 属性时遇到问题。

我试着让它有一个页面标题、几行解释性文本、一些切换控件，然后是图像。在各种图像 ID 的定义中，我指定了 z 顺序，以便图像可以堆叠在 imagewrapper div 中。问题出在 imagewrapper 和 overlayimage 的定义上。在我的 PC 上它看起来不错，但使用“顶部”和“左侧”意味着在手机或其他任何地方查看时文本都被遮盖了。请问有人可以提出解决方法吗？

到目前为止的完整代码如下——只是定位出了问题；许多变量和函数目前只是 stub :

var nt = 0;

function togglent() {

  if (nt == 0) {
    document.getElementById("nighttime").style.visibility = "visible";
    document.getElementById("nighttime").style.opacity = 1;
    nt = 1;
  } else {
    document.getElementById("nighttime").style.visibility = "visible";
    document.getElementById("nighttime").style.opacity = document.getElementById("ntSlider").value;
    nt = 0;
  }

  // when clicked, switch back and forth between nighttime; if nt=1, the nighttime needs to be from the slider value



}

function handleClick(cb) {

    var myInterval = setInterval(function() {
      var imgmod = cb.value + "24";

      if (cb.checked) {
        document.getElementById(cb.value).style.opacity = parseFloat(document.getElementById(cb.value).style.opacity) + 0.1;

        if (cb.value != "backdrop" && cb.value != "aurora") {
          document.getElementById(imgmod).style.opacity = parseFloat(document.getElementById(imgmod).style.opacity) + 0.1;
        }

        if (document.getElementById(cb.value).style.opacity >= 1) {
          document.getElementById(cb.value).style.opacity = 1;

          if (cb.value != "backdrop" && cb.value != "aurora") {
            document.getElementById(imgmod).style.opacity = 1;
          }

          clearInterval(myInterval);
        }
      } else {
        document.getElementById(cb.value).style.opacity = parseFloat(document.getElementById(cb.value).style.opacity) - 0.1;
        if (cb.value != "backdrop" && cb.value != "aurora") {
          document.getElementById(imgmod).style.opacity = parseFloat(document.getElementById(imgmod).style.opacity) - 0.1;
        }

        if (document.getElementById(cb.value).style.opacity <= 0) {
          document.getElementById(cb.value).style.opacity = 0;

          if (cb.value != "backdrop" && cb.value != "aurora") {
            document.getElementById(imgmod).style.opacity = 0;
          }

          clearInterval(myInterval);
        }
      }

    }, 100);

  } // end of handleClick

function showSliderValue(sl) {

  if (sl > 0) {
    document.getElementById("nighttime").style.visibility = "visible";
    document.getElementById("nighttime").style.opacity = sl;
  } else if (sl == 0) {
    document.getElementById("nighttime").style.visibility = "visible";
    document.getElementById("nighttime").style.opacity = sl;
  }

}



function alldata(cb) {
  if (cb.checked) {

    document.getElementById("mainindex").style.visibility = "visible";

    document.getElementById("mainindex24").style.visibility = "hidden";

  } else {
    document.getElementById("mainindex").style.visibility = "hidden";

    document.getElementById("mainindex24").style.visibility = "visible";

  }

}

.imageWrapper {
  position: relative;
}
.overlayImage {
  position: absolute;
  top: 330;
  left: 0;
}
#nighttime {
  z-index: 10;  /* An element with greater stack order is always in front of an element with a lower stack order. */
  opacity: 0.0;
  visibility: hidden;
}
#background {
  z-index: -2;
  opacity: 1.0;
  visibility: visible;
}
#backdrop {
  z-index: 0;
  opacity: 0.0;
  visibility: visible;
}
#aurora {
  z-index: 1;
  opacity: 1.0;
  visibility: visible;
}
#mainindex {
  z-index: 3;
  opacity: 1.0;
  visibility: visible;
}
#mainindex24 {
  z-index: 3;
  opacity: 1.0;
  visibility: hidden;
}
input {
  margin: 10px 10px 10px 10px;
}

<div class="imageWrapper" onclick='togglent();'>
  <img id="nighttime" class="overlayImage" src="nt.jpg">
  <img id="background" class="overlayImage" src="background.jpg">
  <img id="backdrop" class="overlayImage" src="Equirectangular_projection_SW.jpg">
  <img id="aurora" class="overlayImage" src="aurora.png">
</div>
<p>

  <form action="">
    <input type="checkbox" onclick='handleClick(this);' value="backdrop" checked><span style="color: black;">Backdrop</span>
    <input type="checkbox" onclick='handleClick(this);' value="aurora" checked>
  </form>

Answer 1

在所做的更改中，与 OP 的问题最相关的是:

  .imageWrapper {
      position: relative;
      height: auto;
      width: 100vw;
    }
    .overlayImage {
      position: absolute;
      top: 10vh;
      left: 0;
    }

通过使用相对测量单位，例如百分比 (%)、ems、rems、视口(viewport)高度和宽度 ( >vh 和vw)，我们可以获得足够的 flex 以避免关键区域在不同维度范围内的重叠。

片段

<html>

<head>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    .imageWrapper {
      position: relative;
      height: auto;
      width: 100vw;
    }
    .overlayImage {
      position: absolute;
      top: 10vh;
      left: 0;
    }
    #nighttime {
      z-index: 10;
      opacity: 0.0;
    }
    #background {
      z-index: -2;
      opacity: 1.0;
    }
    #backdrop {
      z-index: 0;
      opacity: 0.0;
    }
    #aurora {
      z-index: 1;
      opacity: 1.0;
    }
    #mainindex {
      z-index: 3;
      opacity: 1.0;
    }
    #mainindex24 {
      z-index: 3;
      opacity: 1.0;
    }
    input {
      margin: 10px 0;
      display: none;
    }
    fieldset {
      width: 720px;
      line-height: 1.5;
      min-height: 20px;
    }
    img {
      display: block;
      margin: 0 auto;
      max-width: 720px;
      height: auto;
    }
    label input + span {
      padding: 5px 10px;
      background: rgba(255, 0, 128, .4);
      height: 100%;
      width: 100%;
    }
    label input:checked + span {
      background: rgba(0, 0, 255, .4);
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="imageWrapper" onclick='togglent();'>
    <img id="nighttime" class="overlayImage" src="http://orig15.deviantart.net/8697/f/2016/047/5/c/windows_nt_by_gpolydoros-d7k5mry.png">
    <img id="background" class="overlayImage" src="http://vignette3.wikia.nocookie.net/masseffect/images/1/1f/Background.jpg/revision/latest?cb=20121030013132">
    <img id="backdrop" class="overlayImage" src="https://upload.wikimedia.org/wikipedia/commons/8/83/Equirectangular_projection_SW.jpg">
    <img id="aurora" class="overlayImage" src="http://www.luostonporosafarit.fi/media/wwwkuvat/porokuvia_2014/northern_lights.jpg.jpg">
  </div>

  <form action="">
    <fieldset>
      <label>Back
        <input type="checkbox" onclick='handleClick(this);' value="backdrop" checked>
        <span></span>
      </label>


      <label>drop
        <input type="checkbox" onclick='handleClick(this);' value="aurora" checked>
        <span></span>
      </label>
    </fieldset>
  </form>
  <script>
    var nt = 0;

    function togglent() {

      if (nt === 0) {
        document.getElementById("nighttime").style.visibility = "visible";
        document.getElementById("nighttime").style.opacity = 1;
        nt = 1;
      } else {
        document.getElementById("nighttime").style.visibility = "visible";
        document.getElementById("nighttime").style.opacity = document.getElementById("ntSlider").value;
        nt = 0;
      }

      // when clicked, switch back and forth between nighttime; if nt=1, the nighttime needs to be from the slider value



    }

    function handleClick(cb) {

        var myInterval = setInterval(function() {
          var imgmod = cb.value + "24";

          if (cb.checked) {
            document.getElementById(cb.value).style.opacity = parseFloat(document.getElementById(cb.value).style.opacity) + 0.1;

            if (cb.value != "backdrop" && cb.value != "aurora") {
              document.getElementById(imgmod).style.opacity = parseFloat(document.getElementById(imgmod).style.opacity) + 0.1;
            }

            if (document.getElementById(cb.value).style.opacity >= 1) {
              document.getElementById(cb.value).style.opacity = 1;

              if (cb.value != "backdrop" && cb.value != "aurora") {
                document.getElementById(imgmod).style.opacity = 1;
              }

              clearInterval(myInterval);
            }
          } else {
            document.getElementById(cb.value).style.opacity = parseFloat(document.getElementById(cb.value).style.opacity) - 0.1;
            if (cb.value != "backdrop" && cb.value != "aurora") {
              document.getElementById(imgmod).style.opacity = parseFloat(document.getElementById(imgmod).style.opacity) - 0.1;
            }

            if (document.getElementById(cb.value).style.opacity <= 0) {
              document.getElementById(cb.value).style.opacity = 0;

              if (cb.value != "backdrop" && cb.value != "aurora") {
                document.getElementById(imgmod).style.opacity = 0;
              }

              clearInterval(myInterval);
            }
          }

        }, 100);

      } // end of handleClick

    function showSliderValue(sl) {

      if (sl > 0) {
        document.getElementById("nighttime").style.visibility = "visible";
        document.getElementById("nighttime").style.opacity = sl;
      } else if (sl == 0) {
        document.getElementById("nighttime").style.visibility = "visible";
        document.getElementById("nighttime").style.opacity = sl;
      }

    }



    function alldata(cb) {
      if (cb.checked) {

        document.getElementById("mainindex").style.visibility = "visible";

        document.getElementById("mainindex24").style.visibility = "hidden";

      } else {
        document.getElementById("mainindex").style.visibility = "hidden";

        document.getElementById("mainindex24").style.visibility = "visible";

      }

    }
  </script>
</body>

</html>