努力在 CSS 中正确溢出

Question

由于某种原因，我陷入了这个相当简单的问题。我想要一个可滚动的“网站”（只是一个 looong jpg 截图），通过 iPad 作为我作品集的一部分。目标是展示完整的网站访问体验，而不占用页面上的大量空间。

由于某种原因，我无法让溢出正常工作。从表面上看，这似乎不是一个难题，但它让我很难过。任何朝着正确方向的轻推都会受到赞赏。

    .nest {
     position: relative;
    height: 712px;
    overflow-y: scroll;
    }
    .ipad {
    position: absolute;
    top:0px;
    right:0;
    bottom:auto;
    left:0;
    }
    .container{ 
    height: 940px;
    width: 712px;
    position: absolute;
    top:45px;
    background: red;
    }
    .content { 
     width: 712px;
     overflow: auto;
     }

    <div class="nest">
    <div class="container">
      <img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
    </div>
    <img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
    </div>

Answer 1

从.nest 类中删除overflow-y: scroll;，并将其添加到.container 类中。

.nest {
  position: relative;
  height: 712px;
}

.ipad {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: auto;
  left: 0;
}

.container {
  height: 940px;
  width: 712px;
  position: absolute;
  top: 45px;
  background: red;
  overflow-y: scroll;
}

.content {
  width: 712px;
  overflow: auto;
}

<div class="nest">
  <div class="container">
    <img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
  </div>
  <img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
</div>

Answer 2

您的主要问题是您的.ipad 位于.content 的顶部，并且鼠标滚动正在.ipad 图像上完成其工作，但您想滚动屏幕截图！

    <style>
        .nest {
            position: relative;
            height: 712px;
        }

        .ipad {
            position: absolute;
            top: 0;
            left: 0;
        }

        .container {
            height: 875px;
            width: 660px;
            left: 26px;
            position: absolute;
            top: 73px;
        }

        .container > div {
            max-height: 100%;
            overflow-y: scroll;
            position: absolute;
        }

        .content {
            width: 100%;
        }
    </style>


    <div class="nest">
        <img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
        <div class="container">
            <div>
                <img class="content"
                src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
            </div>
        </div>
    </div>

这里我更改了 HTML 中的顺序以修复 z 轴问题，您可能还想在 CSS 中使用 z-index: number 来修复此问题。