Question

嗨，我正在尝试创建一种效果，我将透明的PNG图像推到屏幕的每个角落，在iframe的顶部。我有我想要的视觉效果 - 但是iframe不会滚动。我认为这与我正在使用的zindex有关。

有没有办法解决这个问题？要么通过更改CSS或添加一些JavaScript？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.top-left {
    width: 100%;
    height: 100vh;
    background-image: url(TOP_LEFT/BACKGROUND_TOP_LEFT.png);
    background-repeat: no-repeat;
    background-position: left top;
    z-index:10;
}
.top-right {
    width: 100%;
    height: 100vh;
    background-image: url(TOP_RIGHT/BACKGROUND_TOP_RIGHT.png);
    background-repeat: no-repeat;
    background-position: right top;
    z-index:10;
}
.bottom-left {
    width: 100%;
    height: 100vh;
    background-image: url(BOTTOM_LEFT/BACKGROUND_BOTTOM_LEFT.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    z-index:5;
}
.bottom-right {
    width: 100%;
    height: 100vh;
    background-image: url(BOTTOM_RIGHT/BACKGROUND_BOTTOM_RIGHT.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index:5;
}
.standon-iframe {
    width: 100%;
    height: 100vh;
    z-index:-100;
    position:absolute;
}
</style>

<body>
<div class="bottom-left">
  <div class="bottom-right">
    <div class="top-left">
      <div class="top-right">
        <div class="standon-iframe">
          <iframe src="http://standon-calling.com/about/" width="100%;" height="100%"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

如何在全屏div

0 个答案: