Adjusting the layering of a nested element within a container div using

Question

Adjusting the layering of a nested element within a container div using

I am facing an issue with two buttons placed within a container div that is being overlapped by another container div.

The bottom container overlaps the top one, rendering the buttons unclickable. I have been trying to find a solution to make the buttons clickable without adjusting the z-index of the top container higher than the bottom one, as it would affect the background display. I have experimented with various z-index settings but haven't found a satisfactory solution yet.

If anyone has any insights or suggestions on how to resolve this issue, please share your thoughts!

Below is the code for the top container div:

(CSS code for top div)
...
... (The CSS code goes here)
...
...

<div class="container banner">
  ...
  ... (HTML code for top div)
  ...
</div>

And here is the code for the bottom container div:

(CSS code for bottom div)
...
... (The CSS code goes here)
...
...

<div class="container onze-section">
  ...
  ... (HTML code for bottom div)
  ...
</div>

html css

Answer 1

Answer №1

To prevent pointer interaction, you have the option to utilize CSS to disable it on the main container:

pointer-events: none;

Answer 2

To prevent pointer interaction, you have the option to utilize CSS to disable it on the main container:

pointer-events: none;

Answer 3

Answer №2

To improve the functionality of the buttons, consider increasing the z-index. Another option is to add pointer-events: none to the overlaying div.

For a visual demonstration of different scenarios, check out this demo:
https://jsfiddle.net/ah7d84j2/

.container {
  position: relative;
}

.element-one {
  background: black;
}

.element-two {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: white;
  opacity: 0.5;
}

.container.pe .element-two{
  pointer-events: none;
}

.container.zi .element-one input {
  position: relative;
  z-index: 1;
}

<div class="container">
<div class="element-one">
  <input type="button" value="non-clickable button">
</div>
<div class="element-two"></div>
</div>

<br>

<div class="container pe">
<div class="element-one">
   <input type="button" value="clickable button">
</div>
<div class="element-two"></div>
</div>

<br>

<div class="container zi">
<div class="element-one">
   <input type="button" value="fully visible and clickable button">
</div>
<div class="element-two"></div>
</div>

If you need further assistance, please provide the HTML and CSS code related to your issue for better support.

Answer 4

To improve the functionality of the buttons, consider increasing the z-index. Another option is to add pointer-events: none to the overlaying div.

For a visual demonstration of different scenarios, check out this demo:
https://jsfiddle.net/ah7d84j2/

.container {
  position: relative;
}

.element-one {
  background: black;
}

.element-two {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: white;
  opacity: 0.5;
}

.container.pe .element-two{
  pointer-events: none;
}

.container.zi .element-one input {
  position: relative;
  z-index: 1;
}

<div class="container">
<div class="element-one">
  <input type="button" value="non-clickable button">
</div>
<div class="element-two"></div>
</div>

<br>

<div class="container pe">
<div class="element-one">
   <input type="button" value="clickable button">
</div>
<div class="element-two"></div>
</div>

<br>

<div class="container zi">
<div class="element-one">
   <input type="button" value="fully visible and clickable button">
</div>
<div class="element-two"></div>
</div>

If you need further assistance, please provide the HTML and CSS code related to your issue for better support.

Adjusting the layering of a nested element within a container div using

Answer №1

Answer №2

Similar questions

Extending the href value using jQuery at the end

Ensuring consistency in aligning float elements

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

How come the link function of my directive isn't being triggered?

Mysterious gap found between image and table

Manipulate the <title> tag using jQuery or PHP

Accessing an image from a directory using Javascript

- Challenges with internal systems

The Google Maps JavaScript API is displaying a map of China instead of the intended location

Hover Effect with CSS Selector - JavaScript or jQuery Implementation

How can I show a Spinner component overlay in a TextField, replacing the usual iconProps rendering the icon in Fluent UI?

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

What is the best way to use Jquery to enclose a portion of a paragraph text within a

The MVC 5 view is unable to display an HTML image when adding it within an appended div

What is the correct way to incorporate scrollIntoView() using jQuery?

Ajax fails to function within a loop

Foundation: the importance of source order (without using flex grid)

implement an angular directive to apply a CSS element

Set the class of the list item to "active" class

Struggling to make align-content function properly in a CSS flexbox layout grid