z-index issue with overlay not able to click - html

up I am able to add the scroll to the pop up if it is bigger than the screen but I am having issue with the overlay I am not able to click on it..if you double click on overlay you will notice the cross button get the selection but the at the bottom left side powered by should get the selection
.booklyng-modal-body .popup-box-wrapper {
overflow-x: hidden !important;
max-height: 100%;
overflow-y: auto !important;
z-index:222;
}
This code is to add the scroll for my div kindly check the following link
if you can help click here

z-index property only works on positioned elements. So try adding position: relative; to your selector.
Source: https://www.w3schools.com/cssref/pr_pos_z-index.asp

For adding z-index on specific part or div, you have to clarify the z-index of overlay area.For eg. if you want to add z-index for image card over parent div then you have to add z-index:-1 for parent div and for child element z-index:1;

Related

Overflow for slick slider with fixed background, how to prevent image cropping on slide?

There is a stylized slick-slider where the image should go beyond the top border:
At the same time, for .slick-list I have a background set (which is fixed, only the content is scrolled - text, picture and button):
How can I prevent the picture from being cropped?
Here are steps how to fix it
add to css
.home-slider .slick-list { overflow: visible !important; } - you need IMPORTANT as {overflow: hidden} will be added to the element style during the animation.
Clones on left/right should be visible
add new CSS selector + styles
.home-slider.slick-slider {
position: static;
overflow: hidden;
}
Clones shouldn't be visible. But you have wrong position for the button and dots at the bottom
wrap(create parent div.home-slider-wrapper) the div.home-slider in the div.home-slider-wrapper at your html
add to css
.home-slider-wrapper {position: relative;}
align button + dots, position of these elements calculated from .home-slider-wrapper

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

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

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

Overflow: hidden problems

I have a facebook like button in the caption part of a slideshow div, which is in the far bottom right. Obviously, the slideshow container has overflow: hidden, and when you click like the 'post to wall' bit pops up, below the like button. As expected, this is cut off.. but I need it to be visible. I have tried z-index and position: absolute with no luck.. any suggestions please?
You can see the site here: http://65.39.128.45/~apretty/category/habitat/
You need to put the like button outside the element with overflow: hidden since no children to an element with overflow: hidden can overflow the parent...