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
Related
Currently working on small wordpress site, and found one thing that i cant sort myself. I work on mobile version of site, and want to move two elements (title of page and cart icon) a little top of page.
i Have inserted this css:
.woodmart-shopping-cart {
margin-top:-80px; // Inserted this
}
but element seems to be overlayed by other element:
tryed to put this:
.woodmart-shopping-cart {
position: relative;
z-index: 99;
margin-top: -80px;
overflow: visible;
}
But seems like no makes any change. Cart element is still overlayed by other element. Some help here?
EDIT:
After some directions from above, i set my css like this:
.container {
z-index:999;
position:relative;
}
.page-title.color-scheme-light .entry-title {
z-index:0;
margin-top:-60px;
}
.woodmart-cart-design-5 {
z-index:0;
}
but now seems like cart icon is not clickable like before, when you click it does nothing.
But dont see any change. Some tips?
Try applying z-index: 1; on the card element icon and z-index: 0; on the other element.
The object with z-index: 1; will be in front of the object with z-index: 0; but the objects have to be positioned with position
As far I can see from only pics and no code, I think you are trying to place the shopping cart on top of your navbar div, right? If your navbar has position:relative, then .woodmart-shopping-cart's position has to be: position:absolute. This way you can easily control your second element how to appear on top of the other.
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;
}
I have tried to replicate the issue in this plunker.
.demo-blog.mdl-layout .mdl-layout__content {
padding-top: 0px;
position: relative;
margin-top: -80px;
z-index: 100;
}
header.main-header{
z-index: -50;
}
I want the div that says "on the road again" to be on top of the header that says "evolution update". I have tried changing the parent's z-index, changing each related unit's z-index, wrap header within a div tag, and yet nothing works. The "on the road again" div is still beneath the header.
What is I want is this.
Thanks a lot in advance.
Used to z-index with position without position this is not working.
The z-index property specifies the stack order of an element.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
A solution to this problem is you need to add margin-top: -60px; to .demo-blog
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;
}
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...