Html Question posted in
Some basic documentation can be found here.

Html – Scrollable element with low z-index inaccessible?

I’m working on a page for my website with a gallery of images, the gallery has a fixed height and variable width so that I can continue to add images freely. I have an information menu on the left hand side, full screen height, and I wanted an effect where the gallery would initially be displayed to the right of the menu, and would then go under that element as the user scrolled through.

I have gotten it to display to the right of the menu by having transparent spacer elements, but when I set the gallery z-index to -1 the scroll bar is visible but non functional, it’s trapped under the menu and the gallery can’t be scrolled. Is there a way to fix this?

Here is my current layout for this page of my site. I’ve been setting the crate z-index to 1 for adding images.

Tags:

2

Answers


  1. 0

    Maybe you’re encountering a common issue with z-index and stacking contexts in CSS. Here are a few steps you can try to resolve this:

    1. Ensure Proper Positioning: Make sure that both the menu and the gallery have their position property set. For example:
    .menu {
  position: fixed;
  z-index: 10; /* Ensure the menu is above the gallery */
}

.gallery {
  position: relative; /* or absolute, depending on your layout */
  z-index: -1; /* This might need adjustment */
}
    1. Adjust the Stacking Context: Sometimes, elements need to be within the same stacking context. Ensure that the parent elements of both the menu and the gallery do not interfere with their z-index values.
    2. Use overflow Property: If the gallery is not scrolling, you might need to set the overflow property on the gallery container:
    .gallery-container {
    overflow: auto; /* or scroll */
    height: 100%; /* Ensure it takes the full height */
}

    1. Check for Other Interfering Elements: Ensure no other elements are interfering with the scroll functionality. Sometimes, other elements with higher z-index values can block interactions.

    2. Debugging with Browser Tools: Use browser developer tools to inspect the elements and their computed styles. This can help you see if there are any unexpected styles affecting the layout.

    Here’s a more concrete example combining these suggestions:

    <div class="menu">Menu</div>
<div class="gallery-container">
    <div class="gallery">
        <!-- Your images here -->
    </div>
</div>

    .menu {
    position: fixed;
    z-index: 10;
    width: 200px; /* Adjust as needed */
    height: 100vh;
}

.gallery-container {
    margin-left: 200px; /* Same width as the menu */
    height: 100vh;
    overflow: auto;
    position: relative;
}

.gallery {
    position: relative;
    z-index: 1; /* Adjust as needed */
}

    Try these adjustments and see if they resolve the issue.

    Login or Signup to reply.
  2. 0

    Your problem is that the "menubox" occupies the entire view (although it only has content on the right side, the rest is invisible), so when you change the z-index you leave the menubox in front and the scroll is not registering to be related to the gallery.
    I think the simplest solution for you would be to add these properties to your menubox in css:

    .menubox{position: relative; z-index: 2; display: grid; width: max-content;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search