Showing a div above another div without relying on z-index

I have designed custom drop down menus that consist of one <div> containing the current value and functioning as a <select> field, with another <div> below it that appears when the top one is clicked, displaying all the <option> values.

The layout requires the lower <div> to be positioned slightly beneath the upper one (to achieve rounded corners, etc), so I utilized z-index for this purpose. Everything works perfectly until there are two drop down menus in close proximity. When you click on the first menu, the option list displays below the second dropdown menu as well, which is not ideal. Here's a simplified version demonstrating the issue in a jsfiddle: jsFiddle

As shown, the first drop down menu functions correctly but the second one is hidden beneath the third one. Do you have any suggestions on how to resolve this so that both menus work properly without using z-index? Thank you!

htmlcssdrop-down-menuz-indexoverlap

Answer №1

To start, make sure to encapsulate each menu within a designated element. I opted for using a div.container for this purpose.

Considering that only one menu should be visible at a time, a simple adjustment of the z-index property for the .major and .minor elements within each container (such as on hover in the provided example) proves effective:

.major {
  position: relative;
  width: 100px;
  background-color: red;
  z-index: 1;
}
.minor {
  position: absolute;
  width: 150px;
  background-color: blue;
  padding-top: 10px;
  margin-top: -10px;
  z-index: 0;
  display: none;
}
.container:hover .major {
  z-index: 5;
}
.container:hover .minor {
  display: block;
  z-index: 4;
}
.moveup {
  margin-top: -25px;
}
<div class="container">
  <div class="major">
    First menu text
  </div>
  <div class="minor">
    Option details here Option details here Option details here
  </div>
</div>
<br />
<br />
<br />
<br />
<div class="container">
  <div class="major">
    Second menu content
  </div>
  <div class="minor">
    Option details here Option details here Option details here
  </div>
</div>
<div class="container">
  <div class="major">
    Third menu description
  </div>
  <div class="minor">
    Option details here Option details here Option details here
  </div>
</div>

Answer №2

It's a bit unclear what you're asking, but if I understand correctly, the solution might involve enclosing the .major and .minor divs within a wrapper to prevent them from overlapping. Here's an example:

<div class="container">
  <div class="major">
    First section
  </div>
  <div class="minor">
    Second section
  </div>
</div>

You can view my updated version of your JSFiddle here: https://jsfiddle.net/xyz123/

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 callback function fails to execute the click event following the .load() method

Hey there, I've hit a roadblock and could really use some help figuring out where I went wrong. Let me break down my script for you. On page1.html, I have a div that gets replaced by another div from page2.html using jQuery's .load() method. Here ...

javascriptjqueryhtmlcssajax

What is the best method to store the name of an image as a session variable?

<!--images acting as buttons--> <form> <img src="peanuts.jpg"" class="qac left" onclick="qac_search()" name="Peanuts"> <img src="milk.jpg" class="qac" onclick=&qu ...

phphtmlvariablesbuttonsession-variables

Only show a single li element in CSS at a time

I'm working with Angular 2 and I have a list: <ul> <li *ngFor="let show of (ann)"> {{show}} </li> </ul> I want to show one item from the list every 3 seconds in an infinite loop. Here&apos ...

cssangular

Placing a div with absolute positioning inside another div with absolute positioning raises the question of how it functions when the outer div is not set to position: relative

Trying to grasp the concept, I experimented with the following setup: <div id="Outer"> <div id="Inner"></div> </div> In this scenario, the outer div has a relative position and the inner div has an absolute position. This allo ...

htmlcssposition

Unusual occurrences observed with table cell padding in CSS

When I include a TD padding in my CSS like this: #maincontent table td, #maincontent table th { padding: .333em 0 .333em .25em; } In Safari and IE, the padding is applied correctly to the TD, but not in Firefox. If I apply the TD padding only to th ...

csscross-browsercss-tables

Issue with specific selectors causing React CSS module malfunction

Currently, I am a beginner in learning React and have been experimenting with CSS modules. Even though Menu.module.css is mostly functioning correctly, it seems to be having an issue applying styles to the .menu a.last selector for some reason (although i ...

javascriptcssreactjsmoduleselector

AutoComplete issues a warning in red when the value assigned to the useState hook it is associated with is altered

const [selectedCountry, setSelectedCountry] = useState(); <Autocomplete autoHighlight={true} //required autoSelect={true} id="geo-select-country" options={availableCountries} value={se ...

javascripthtmlreactjsautocompletematerial-ui

Markdown Custom Parsing

Every week, I create a digest email for my university in a specific format. Currently, I have to manually construct these emails using a cumbersome HTML template. I am considering utilizing Markdown to automate this process by parsing a file that contains ...

pythonhtmlrubymarkdownhtml-email

button click event blocked due to unforeseen circumstances

Recently, I've been attempting to change the CSS properties of a div by triggering a click event. However, no matter what I do, it doesn't seem to be working and it's starting to frustrate me. Can anyone shed some light on why this might be ...

javascriptjqueryhtmlcss

Guide on intercepting errors and sending the corresponding error message back to the client side using Node.js

Attempting to capture errors after utilizing Node.js to search for data in the database. However, whenever there is an error, the server consistently sends {errormsg: null} to the client side. I anticipate a more detailed explanation within the errormsg ...

htmlnode.js

Policy regarding copyright content removal and protection of privacy

In the majority of musical websites I have come across, they often mention the following in their policies: At this particular website (www.Indiamp3.com), you will find links that redirect to audio files. These files are hosted elsewhere on the internet a ...

asp.nethtmlweb-crawlerprivacy

What is the best way to limit the dimension of uploaded images to a specific height and width?

function validateImageDimensions(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#uploadForm + img').remove(); var img = $('<img> ...

jqueryhtmlimagefile-upload

Pass an array from a script file in JavaScript to index.js within the Express framework

I've encountered a challenge in sending an array (or JSON object) from script.js to index.js, my express server file. I've explored various solutions such as passing the variable through an HTML file and then to another JavaScript file, utilizing ...

javascripthtmlnode.jsarraysexpress

What could be causing certain grid items to display in a disorderly manner?

Currently, I am working on a CSS grid layout that resembles the one showcased in this demo. The challenge I'm facing is related to the ordering of items within the grid. Specifically, every 6th and 7th item seem to be out of order and I would like the ...

htmlcsslayoutcss-selectorscss-grid

Please only choose the immediate children of the body element

<body> <div> <div class='container'></div> </div> <div class='container'></div> </body> Is there a way to use jQuery to specifically target the second container div dire ...

jqueryhtmlcss

The hover effect fails to function properly after altering the background color. The default color setting is transparent

<button class="button-main slide">Slide Left</button> .button-main{ color: black; outline: none; background: transparent; border: none; letter-spacing: 0.0625em; padding: 8px 10px; text-transform: uppercase; font: b ...

htmlcss

Unused sizing attributes in IMG tags

I can't seem to figure out what's going wrong here... I want the image tag to initially display the 250px wide "small" image, and then allow the browser to select the most suitable image using the srcset and sizes attributes - essentially, the " ...

html

Looking for a logo placed in the center with a top fixed navigation using Bootstrap

I am in need of a Centered Logo using Bootstrap fixed top navigation. The goal is to have the brand centered within the navigation. Check out my Sample Fiddle .LandPageNavLinks { list-style-type:none; margin:0; padding:0; } .LandPageNavLin ...

htmlcsstwitter-bootstrap

Ways to run a template multiple times within a single handler function

I'm working on implementing a progress bar that dynamically updates based on the progression of a command line argument within my Go code. I've been using a template to update the progress value every second by calling template.Execute(w, data) i ...

htmlgobootstrap-4

Executing PHP code upon clicking an HTML button

I am currently in the process of creating a simple webpage that will execute a stress test and mimic a load on my web server. The PHP code for stress is functioning properly, however, when I attempt to click the button, nothing seems to happen. <?php ...

phphtml