The issue is in this link
http://www.accept.eu.kia.com/us/models/kia-sorento-2014/
If you can scroll to just above end of the page, there is a red button 'Configure', which creates a lightbox popup which is hiding behind a div. I cannot bring this popup over it even though its having a greater z-index. There is another 'configure' button just below a 360 degree rotatable car which is working fine.
Am I missing something obvious
Hope this helps
.lightBoxOverlay{
z-index : 10001 //Change this to 0
}
For me changes will be in product.css:13172
I think the z-index of the div having black overlay effect is greater then your popup div that is why it is showing behind.
Feel free to ask any further question
Update 1
Issue is not with z-index actually your popup div is not getting display:block it is still display:none after clicking configure button Can you just have a look in code causing that display:none or block to your popup.
class 'slick-list draggable' should have z-index greater than lightbox wrapper.
Related
I added a button to open a modal when clicked. It works when at the top of the page but when you scroll further down and try to click it, the button no longer opens up the modal. I've put only the code used for the modal and button without the rest of the site code into it's own file to test it and it works just fine so it has to be something somewhere else in the code affecting it.
Here's the GitHub link: https://github.com/xman2156/TOH
Your button appears early in the markup, and is positioned but doesn't have a z-index set. However, it has later siblings which are also positioned without z-index set, notably <div class="tab">, which means it will appear on top of your button in the z-index and block clicks through to it.
If you apply z-index: 1; to your button, that will move it in front of the div that's currently in the way. If you need to ensure it's always on top of other content, you might find it useful to wrap the rest of your content in a single element that creates a separate stacking context, for example by applying position: relative;.
For some more information on stacking contexts and using z-index, here is a link that I find is a useful reference: What no one told you about z-index
set z-index:1000 for both #info and #infoBtn
it'll solve your problem. I tried it.
I've got this page http://jsfiddle.net/UFTSK/2/ When you hover at image there is popup block overlay bug. if I remove z-index in a tag ( http://jsfiddle.net/UFTSK/3/ ), all working correct. But in IE7 the same problem. Please help.
I used jQuery to Dynamically update z-index of your popup and anchor and also change the position of the popup and here you go.
http://jsfiddle.net/KwB9k/
I am fading in a hidden div as an overlay div (with jQuery). It appears above all elements of my page, except the Facebook Like button.
I tried z-index: 100; in CSS but it didn't work.
Anyone had that problem?
PS: Same thing happens with the Twitter button, but not with the Google +1 button
<fb:like href="http://www.apple.com" send="true" layout="button_count"
width="450" show_faces="false"></fb:like>
Ok, this seems to make sense, considering the twitter and Facebook button will use JS to create their buttons.
Because the JS will run client side after all your styles have loaded, it can always overwrite any attempts to cover it up.
I actually think covering up the facebook like button might be against the TOS but you will need to check into that.
Things to try
Encompassing Div
Create a div around it, with the appropriate z-index.
Correct z-index
Make sure the FB and Twitter buttons aren't creating z-index's greater than yours. While z-index technically only goes from 0-255 (i think), people go negative and above 255 to make sure they are the highest or lowest.
JavaScript
After the buttons have loaded, use JS to set the z-index or other properties to hide
I have a container div with z-index of -1 (because above this container is a menubar with a menuitem with dropdown list). I have a hyperlink (a href text) inside this container. It is not getting clickable on Chrome. In IE, its Ok.
Any suggestions, please?
Ok, I solved the problem myself. For anyone interested, what I did is I made the z-index of the menubar div +100 rather than making the z-index of the container div to -1. However, now, the opposite phenonmenon occurred i.e. worked in chrome but not in IE. Then, I found this site :
http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
which explains how to target the css explicitly for IE. So, with sort of binary switching the z-index for each browser type, I managed to do it.
Problem in IE 7: When I mouse over the question mark icon, the tooltip javascript popup is not completely shown in IE 7. Bottom portion is hidden behind the "Auto Assign" block. How can I show the entire tooltip popup?
Here is the jsFiddle link : http://jsfiddle.net/FLyXM/1/
Just apply z-index:1 to Pin field li where you place the tooltip.
Thats it!
z-index only works on positioned elements. Give the element position:relative or something. Also, please use the enter key more when coding css, your's is very hard to read.
https://developer.mozilla.org/en/CSS/z-index