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/
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.
Why when I hover mouse on cards image moved ?!
I am trying to fix it and I find when I remove page direction and or remove overflow-y from #center it's fixed but I need them !!
even when I inspect elements in cards and mouse hovering could to see all elements are moved but shown correct ! I guess it's maybe page rendering problem in chrome browser
in fact what is problem and how can I to fix it technically ?
JSFiddle Demo
This issue appears to be a Chrome bug according to this topic:
image moves on hover - chrome opacity issue
and I think you should setting position:relative to inner img solves the problem
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.
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