CSS: Dropdown menu gets hidden behind the content - html

Please take a look at this page
If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).
I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.
Do you have any idea how to fix this?

Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.
.banner {
position: relative;
z-index: 10;
}

You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.
You can play with the z-index of other elements to keep them above others on the page.

Check if the overflow setting is set to hidden, if it is remove the value.
.banner {
overflow: hidden // remove
}

The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.

Try adding the following styles to class dropdown:
.dropdown {
position: fixed;
z-index: 9999;
}

Related

Scrollbar thumb is displayed over an absolute div

So I have the situation that is shown in this screenshot:
There is a calendar that open when a button is clicked, the div container for the calendar is absolutely positioned. But the scrollbar of the underneath table is always on top of that calendar, the calendar has a very high z-index already.
The table has overflow set to auto.
I tried targeting the scrollbar with some custom CSS to manipulate the z-index but that made the whole scrollbar disappear:
::-webkit-scrollbar {
z-index: -1;
}
Also tried ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb which had no effect. Any idea what I can try? Thanks.
P.S. I'm using VueJs with Tailwind.
Increase the z-index of calendar like 999
.your_calendar_class{
z-index: 999;
}
have you tried positioning the parent container of the calendar div?
add your css "position" tag.
.your_calendar_class{
z-index: 999;
}
this doesn't work.
use:
.your_calendar_class{
z-index: 999;
position:relative;
}

Fix Position DIV not Overlapping content

I am having an issue getting my fixed position navigation menu to overlap my text, a example of this is: http://www.saveur.com/michel-roux-scrambled-eggs-with-asparagus-and-crab-recipe
With the code I have currently managed the fixed position navigation appears behind the text, but I want it to be at the top and overlapping at all times, just like the website above.
All of the content is fixed position, I have made this so that if any one could help me they could just edit the code easier.
HTML: http://pastebin.com/j7jHjb4h
CSS: http://pastebin.com/sWuLChut
How can I make it so that the navigation menu stays at the top even when scrolling down just like the website above.
Just add a z-index value to the fixed element:
z-index:100;
If larger than any other z-index on the same level, it will overlap everything as needed.
#navMenu {
margin:0;
width:200px;
height: 1px;
z-index: 1000;
}
You could try to give it a high z-index

Can't position a div above other docs?

I am trying to position a div above others through absolute positioning. But the div is still under an AdSense ad. My website is located at http://tinyurl.com/q3uwbf3. Try out the div by clicking on login on top-right corner.
Increase/Add the z-index property, will fix the issue. On inspecting using developer tools I fixed it
#loginmenu {
z-index: 99;
}
Your issue has to do with Z-INDEX.
Make sure you set it higher than the element that is hiding your DIV. Think of Z-INDEX as possible layers on top of each other.
#loginmenu {
z-index:999;
}
Might be a problem with the z-index, which basically determines what's in front and what's in the back.
Take a look at this: http://www.echoecho.com/csslayers.htm
give z-index 1; in the style tagg or css
#loginmenu {
z-index: 1;
}
<div style="display: block; z-index: 1;" id="loginmenu">
</div>
Any element with higher z index comes upper

Why does the menu appear in Chrome and FireFox, but not IE?

Why does the top category menu (Everything, Ballet Flats, Boots, etc) - div id="header-bar" - look great in FireFox and Chrome, but be hidden in IE unless you scroll down the page?
http://shoeporn.com
Any help will be much appreciated :)
It's positioned underneath (behind) the top bar. Either change the z-index to something bigger than the top bar, or change the top to position it below the top bar.
Its hidden in chrome as well. The z-index is lower than the one of the background or something.
Anyway add something like this to your header-nav:
z-index: 130;
I find setting position:absolute on #header-bar in this particular example to be poor practice. Consider changing that to
#header-bar {
position: relative;
/*left: 0;
right: 0;
top: 44px; - remove these*/
}
This will maintain natural document flow; position:relative allows for dropdown positioning and maintaining rendering context (compare with removing position property altogether and see the dropdown menus going "behind" the shoe tiles)
Rule of thumb: avoid absolute positioning if you can build without it.
For me its hidden in chrome too... anyway change this in css:
#header-bar {
top: 84px;
z-index: 105;
}
remove z-index from #header-wrapper and add z-index:106 to #header-nav.
Hope it will help...

How to make this dropdown appear above the text below it

I've got a div which has another div drop down below it, but the drop-down appears below the content that's below it, and I want it to appear above it.
I've tried using z-index by setting a lower z-index for the content than the drop-down, but it's not working.
How can I make these divs appear in the correct order? - I've made a mockup of it on a jsfiddle.
I updated your jsfiddle: http://jsfiddle.net/mvRYR/1/
You need to set position: relative; or position: absolute; when using z-index.
just add
z-index: 10; position: relative;
to your #drop style
if you add background-color: yellow; as well, you could see it better...