The fixed blocks are covering the Blueimp gallery within the relative container

Check out this DEMO I created to showcase something interesting. In this demo, you will find a basic example of setting up a blueimp gallery, a navigation bar, and a button.

<div class="nav">nav</div>

<div class="wrapper">

  <div id="links">
    <a href="images/banana.jpg" title="Banana">
      <img src="images/thumbnails/banana.jpg" class="image" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple">
      <img src="images/thumbnails/apple.jpg" class="image" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Orange">
      <img src="images/thumbnails/orange.jpg" class="image" alt="Orange">
    </a>
  </div>

  <div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
  </div>

</div>

<button type="button" class="button">Click Me</button>

When a user clicks on an image, it opens and takes up the full screen. However, if the .wrapper has a relative position, the image won't occupy the full screen as the navigation bar will overlap the image.

Try it out yourself.

  1. Open the demo.
  2. Click on an image.
  3. Close the image.
  4. Click the button.
  5. Click on an image again.

After trying the steps above, you'll notice that the navigation bar overlaps the image.

Wondering how to solve this issue?

Answer №1

When you set a div to relative positioning, it automatically receives a z-index of 1. This can cause issues when your navbar already has a z-index of 10, resulting in unexpected behavior.

To fix this, try assigning a z-index greater than 10 to your relative div in your stylesheet:

  &_relative {
    position: relative;
    z-index: 11;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Meteor update is unsuccessful on the Mongo Sub Collection and will not continue

I am currently facing an issue with updating a specific object within an array in my object based on a value. Whenever I try to add the update code, the function gets stuck at that point without proceeding further. None of the console.log calls after the u ...

Ensuring the presence of Objects/Functions in different browsers using javascript

I am seeking advice on the best practices for testing object existence for cross-browser compatibility. There are numerous methods available for testing whether an object/function/attribute exists. While I could utilize jQuery or another library, my prefe ...

Ways to implement a personalized button in place of jquery ui buttons

Is there a way to replace the standard jQuery dialog buttons with custom images? I have created new buttons in Photoshop with a .png extension and would like to use them instead of the default dialog buttons. I think this can be done through CSS, but if y ...

Every time a button is clicked on the interface, a new element or button will appear. This functionality is made possible through

Currently diving into a new React.js project as a beginner. I have a little challenge in the code snippet below - looking to add a button that displays "Hello World" every time it's clicked using setState. Can anyone guide me on enhancing the DisplayM ...

Creating a unique and personalized dual-row navigation bar using Bootstrap

Currently, I am striving to achieve a "conflict free" two-row fixed-top navbar in Bootstrap 3. I am unsure if it necessitates two separate "navbars" according to the official Bootstrap definition. While I possess decent coding skills, my knowledge of the B ...

Encountering the "node:internal/modules/cjs/loader:1050" error while attempting to execute a folder using the "npm run dev" command

I am encountering an issue while attempting to execute a folder using npm run dev, consistently resulting in the same error message. PS C:\Users\My Name\Desktop\My Folder> npm run dev Debugger attached. > <a href="/cdn-cgi/l/e ...

Tips for blocking submissions when a user tries to input a hyperlink

I have encountered a problem in my journey of learning JS and unfortunately, I couldn't resolve it by myself. Lately, spam has been flooding through the form on my website and all my attempts with jQuery and JS to fix it have failed. As a last resort ...

Notify user before exiting the page if there is an unsaved form using TypeScript

I am working on a script that handles unsaved text inputs. Here is the code for the script: export class Unsave { public static unsave_check(): void { let unsaved = false; $(":input").change(function(){ unsaved = true; ...

Content is not being contained within a div container

I'm facing a unique issue that I've never encountered before - text is not wrapping inside a div element. Here's a snippet of my HTML code: http://jsfiddle.net/NDND2/2/ <div id="calendar_container"> <div id="events_container"& ...

Lazy loading images without the need to manually adjust the image structure

After experimenting with various LazyLoad options, I found that most of them required modifications to the src tag or the addition of a new tag. Is there a way to LazyLoad content without having to change the tag structure? I am extracting content fro ...

Adjust SVG size to fit parent container/division

I am trying to make the SVG completely fill the containing TD. I don't care about preserving the proportions of the SVG. Instead, I want the height of the SVG to be the same as its width when the height should be larger than the width. There is paddin ...

The functionality of onClick or onChange seems to be malfunctioning in the preline user interface select component

I recently integrated the preline UI library into my React project to enhance the design of my website. However, I encountered an issue where using the "select" element with the data-hs-select attribute as suggested by preline UI seemed to cause problems w ...

"Enhancing Your Website with Dynamic CSS3 Div Animations

Seeking assistance in displaying an empty div after a CSS3 Animations loading circle has completed. Any guidance is welcome! jsFiddle ...

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

Curious as to why body.scrollTop functions differently in Google Chrome and Firefox compared to Microsoft Edge

Up until recently, the code body.scrollTop was functioning correctly in my Chrome browser. However, I've noticed that now it is returning 0 in both Firefox and Chrome, but still giving the proper value in Microsoft Edge. Is there anyone who can assis ...

struggling with managing an array of Vue3 refs

Having an issue with handling vue3 refs, specifically when retrieving data from Firestore. When logging the [documents], everything seems to work fine. However, I run into errors when trying to access values from an array within a document. For example, ...

Refreshing the Date Display with AJAX Response

Within a view, there is a DisplayFor connected to a DateTime field in the Model. After an AJAX call returns a Date to update the field, I am able to convert the AJAX date into a MM/DD/YYYY format. However, using .val to set the DisplayFor does not reflect ...

The elements on the webpage are spilling over with content

I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result: https://i.stack.imgur.com/5qHJY.jpg Be ...

Develop a Vue component for a fixed sidebar navigation

I am in need of a vertical navigation bar positioned to the left of my app's layout, with the content extending across the right side. However, I am currently facing an issue where the navbar is pushing all the content downwards. How can I resolve thi ...

Buttons are not aligned with the rest of the row's height

I'm currently working on designing an upload layout that consists of a container with a row inside. Within the row, there are two buttons (each containing input elements) and one h3. For some reason, I am having difficulty getting them to align at the ...