Solution 1 :

Try something like this in your CSS:

body {
    margin: 0;
    padding: 0;
}

.layout__head {
    height: 100px;
    overflow: hidden;
    position: fixed;
    z-index: 20;
}

.layout__body {
    overflow-x: scroll;
}

.layout__titles {
    position: absolute;
    overflow: hidden;
    width: 180px;
    z-index: 10;
}

The HTML structure will be similar like this:

<div class="layout">
    <div class="layout__head">
        <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png" alt="Application Versions in Amazon EMR 5.x Releases" />
    </div>
    <div class="layout__body">
        <div class="layout__titles">
            <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png" alt="Application names on EMR 5.x" />
        </div>
        <div class="layout__versions">
            <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png" alt="Application version on EMR 5.x" />
        </div>
    </div>
</div>

Solution 2 :

Bruno’s approach separating the scrollbars over nested elements is in my opinion the one giving the best compatibility, so it is interesting. However, the drawback is that you have to scroll the outer element to reach the inner scrollbar.

If you don’t have to support “old” browsers, then you can make use of the sticky position mode which is more flexible than the fixed mode. You can check here the browser support for sticky position.

HTML

<body>
    <div id="layout">
        <div id="horizontal_bar">
            <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png"
                alt="Application Versions in Amazon EMR 5.x Releases"/>
        </div>
        <div id="vertical_bar">
            <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png"
                alt="Application names on EMR 5.x" />
        </div>
        <div id="body">
            <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png"
                alt="Application version on EMR 5.x" />
        </div>
    </div>
</body>

CSS

:root {
    --hbar_height: 100px;
    --vbar_width: 180px;
}

body {
    margin: 0;
    padding: 0;
}

#layout {
    overflow: auto;
    position: relative;
    height: 100%;
}

#horizontal_bar {
    overflow: hidden;
    position: sticky;
    height: var(--hbar_height);
    top: 0;
    left: 0;
    z-index: 12;
}

#vertical_bar {
    overflow: hidden;
    position: sticky;
    width: var(--vbar_width);
    left: 0;
    margin-top: calc(0px - var(--hbar_height));  /* compensate for the horizontal bar */
    z-index: 11;
}

#body {
    position: absolute;
    top: 0;
    z-index: 10;
}

The CSS custom properties just help to group settings and avoid redundancy (since the height of the horizontal bar is used twice). Browsers supporting the sticky position are likely to support custom properties as well.

Problem :

I seem to have lost all my CSS memory. I need a vertical header overlaying a scrollable image, which is fixed when scrolling horizontally but relative to the image when scrolling vertically.

What I have is a fixed title, that’s working, then a fixed vertical header, this second use of the image should scroll vertically with the third imageā€¦

<html>
  <body style="padding:0; margin:0;">
      <div style="overflow:hidden; width:5759px; height:100px;
                  position:fixed; z-index:12;">
        <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png"
             alt="Application Versions in Amazon EMR 5.x Releases"
             style=""
        />
      </div>
      <div style="overflow:hidden; width:180px; height:2411px;
                  position:fixed; z-index:11;">
        <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png"
             alt="Application names on EMR 5.x"
             style=""
        />
      </div>
      <div style="overflow-y:scroll; overflow-x:scroll; width:5759px;
                  position:absolute; z-index:10;">
        <img src="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/images/emr-releases-5x.png"
             alt="Application version on EMR 5.x"
             style=""
        />
      </div>
  </body>
</html>

I’m fairly certain the issue is to do with the second image having position:fixed yet I don’t know how to get it to overlay well otherwise.

For now this only works if I reduce the size of all the images such that the height fits entirely within my browser window.

Comments

Comment posted by Temani Afif

you are not setting any top/left/right/bottom value

Comment posted by dlamblin

This worked as I hoped, it seems bundling the elements under the header row was the key to this, as well as correct positioning.

Comment posted by dlamblin

Thanks these are both interesting, I did want the app names to stay visible if I scrolled to the middle of the table (5.12 to 5.20 range of EMR releases) and line up with the version number for those apps in the release.

Comment posted by luciole75w

@dlamblin Ah sorry, I hadn’t checked the actual image :/ Well I have updated the CSS of the vertical bar even so, if you ever consider that in your case the visibility of the horizontal scrollbar is worth the limited compatibility.