Scrollbar thumb is displayed over an absolute div - html

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

CSS element overlayed over other CSS element

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.

How to correctly place sticky td element in table

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;
}

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

CSS: Dropdown menu gets hidden behind the content

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;
}

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...