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;
}
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.
At the end of the table(last td) i have a button, that shows pop-up window with additional options. I want this td/button to be at the end of the row, but when screen is small(appears
X-axis scroll) i want it to stay in the end of the visible part of table. I did it by putting those styles to td:
td {
position: sticky;
right:0
}
It worked, but now if you hover pop-up window(that appears after click) in a special area(above the same button, but from another row) window disappears. I tried to add z-index to pop-up window, but it did not work. Does anyone know how to fix it, or should i use different styles to position td/button?
Pop-up menu:
Moment before disappearing:
try margin-top:-5px . or try to add parent to your element and transfer your style to parent. than to child you must add position:relative and top:-5px
Just Try z-index 0 or -1 to the td{}. I hope it will work fine.
td {
position: sticky;
right:0;
z-index: 0; //or below one
z-index: -1;
}
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
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;
}
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...