CODEWITHSUNDEEP
csscss-positionoverflow
acollin18
acollin18

Reputation: 23

Struggling with getting overflow right in CSS

For some reason I'm getting stuck on this fairly simple problem. I want a scrollable "website" (just a looong jpg screenshot) framed through an iPad as part of my portfolio. The goal is to show the experience of visiting the site in its entirety without taking up a huge amount of space on the page.

For some reason, I haven't been able to get the overflow working right. This doesn't seem like a hard problem on the surface, but it's got me stumped. Any nudge in the right direction is appreciated.

    .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>

Upvotes: 2

Views: 87

Answers (2)

mrkhosravian
mrkhosravian

Reputation: 56

Your main problem is that your .ipad is top of the .content and mouse scroll is doing its job on the .ipad image but you want to scroll the screentshot image!

    <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>

Here I changed the order in HTML to fix the z-axis problem, you may also want to use z-index: number in your CSS to fix this too.

Upvotes: 1

NeNaD
NeNaD

Reputation: 20334

Remove overflow-y: scroll; from .nest class, and add it to .container class.

.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>

Upvotes: 1

Related Questions